@import '../global';

/**
 * @class Ext.carousel.Indicator
 */

/**
 * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots.
 */
$carousel-indicator-size: .5em !default;

/**
 * @var {measurement} $carousel-indicator-spacing
 * Amount of space between carousel indicator dots.
 */
$carousel-indicator-spacing: .2em !default;

/**
 * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in.
 */
$carousel-track-size: 1.5em !default;

/**
 * Creates a theme UI for carousel indicator components.
 *
 * @param {string} $ui-label The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {color} $color Base color for the UI.
 * @param {string} $gradient Default gradient for the UI.
 * @param {color} $active-color Active color for the UI.
 * @param {string} $active-gradient Active gradient for the UI.
 */
@mixin sencha-carousel-indicator-ui($ui-label, $color, $gradient, $active-color, $active-gradient) {
  .x-carousel-indicator-#{$ui-label} span {
    @include background-gradient($color, $gradient);

    &.x-carousel-indicator-active {
      @include background-gradient($active-color, $active-gradient)
    }
  }
}

/**
 * @class Ext.carousel.Carousel
 */

/**
 * Includes basic carousel formatting.
 */
@mixin sencha-carousel {
  .x-carousel {
    position: relative;
    overflow: hidden;
  }

  .x-carousel-item {
    position: absolute;
    width: 100%;
    height: 100%;

    > * {
        position: absolute;
        width: 100%;
        height: 100%;
    }
  }

  .x-carousel-indicator {
    // @TODO: we should not have to cancel out the x-floating styling
    padding: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    background-color: transparent;
    background-image: none;
  }

  .x-carousel-indicator {
    -webkit-box-flex: 1;

    @include display-box;
    @include box-pack(center);
    @include box-align(center);

    span {
      display: block;
      width: $carousel-indicator-size;
      height: $carousel-indicator-size;
      @if $include-border-radius { @include border-radius($carousel-indicator-size / 2); }
      margin: $carousel-indicator-spacing;
    }
  }

  .x-carousel-indicator-horizontal {
    height: $carousel-track-size;
    width: 100%;
  }

  .x-carousel-indicator-vertical {
    @include box-orient(vertical);
    width: $carousel-track-size;
    height: 100%;
  }

  $indicator-light: rgba(#fff, .1);
  $indicator-light-active: rgba(#fff, .3);
  $indicator-dark: rgba(#000, .1);
  $indicator-dark-active: rgba(#000, .3);

  @include sencha-carousel-indicator-ui('light', $indicator-light, 'flat', $indicator-light-active, 'flat');
  @include sencha-carousel-indicator-ui('dark', $indicator-dark, 'flat', $indicator-dark-active, 'flat');
}