@import '../global';

/**
 * @class Ext.dataview.IndexBar
 */

/**
 * @var {measurement} $index-bar-width
 * Width of the index bar.
 */
$index-bar-width: 1.1em !default;

/**
 * @var {color} $index-bar-bg-color
 * Background-color of the index bar.
 */
$index-bar-bg-color: hsla(hue($base-color), 10%, 60%, .8) !default;

/**
 * @var {color} $index-bar-color
 * Text color of the index bar.
 */
$index-bar-color: darken(desaturate($base-color, 5%), 15%) !default;

/**
 * Includes default index bar styles.
 */
@mixin sencha-indexbar {
  .x-indexbar-wrapper {
    -webkit-box-pack: end !important;
    box-pack: end !important;
    pointer-events: none;
  }

  .x-indexbar-vertical {
    width: $index-bar-width;
    @include box-orient(vertical);
    margin-right: 8px;
  }

  .x-indexbar-horizontal {
    height: $index-bar-width;
    @include box-orient(horizontal);
    margin-bottom: 8px;
  }

  .x-indexbar {
    pointer-events: auto;
    z-index: 2;
    padding: .3em 0;
    min-height: 0 !important;
    height: auto !important;
    -webkit-box-flex: 0 !important;

    > div {
      color: $index-bar-color;
      font-size: 0.6em;
      text-align: center;
      line-height: 1.1em;
      font-weight: bold;
      display: block;
    }
  }

  .x-phone.x-landscape .x-indexbar {
    > div {
        font-size: 0.38em;
        line-height: 1em;
    }
  }

  .x-indexbar-pressed {
    @include border-radius(($index-bar-width)/2);
    background-color: $index-bar-bg-color;
  }
}