/**
 * @class Ext.carousel.Carousel
 */
 
// Private variables 
$indicator-light: rgba(#fff, .1);
$indicator-light-active: rgba(#fff, .3);
$indicator-dark: rgba(#000, .1);
$indicator-dark-active: rgba(#000, .3);
 
/**
 * 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) 
        }
    }
}
 
.x-carousel-indicator {
    span {
        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;
}
 
.x-carousel-indicator-vertical {
    width: $carousel-track-size;
}
 
@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');