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

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

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

/**
 * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in.
 */
$carousel-track-size: dynamic(2em);

/**
 * @var {boolean}
 * `true` to include the "light" panel UI
 */
$carousel-light-ui: dynamic($enable-default-uis);

/**
 * @var {boolean}
 * `true` to include the "dark" panel UI
 */
$carousel-dark-ui: dynamic($enable-default-uis);

$carousel-indicator-active-size: dynamic(null);
$carousel-indicator-border-radius: dynamic($carousel-indicator-size / 2);

/**
 * 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:null,
  $color:null,
  $gradient:null,
  $active-color: null,
  $active-gradient: null
) {
  .x-carousel-indicator-#{$ui-label} span {
    @include background-gradient($color, $gradient);

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

// Private variables
@mixin carousel-light-ui {
  @include sencha-carousel-indicator-ui(
  $ui-label: 'light',
  $color: rgba(#fff, .1),
  $active-color: rgba(#fff, .3)
  )
}

@mixin carousel-dark-ui {
  @include sencha-carousel-indicator-ui(
  $ui-label: 'dark',
  $color: rgba(#000, .1),
  $active-color: rgba(#000, .3)
  );
}