/**
 * @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) 
  );
}