/**
 * @class Ext.Indicator
 */
 
/**
 * @var {color}
 * The color of the indicator dots.
 */
$indicator-background-color: dynamic(#ccc);
 
/**
 * @var {string/list}
 * The background-gradient of the indicator dots.
 */
$indicator-background-gradient: dynamic(null);
 
//# fashion replaces $carousel-indicator-size 
/**
 * @var {measurement}
 * The size (height and width) of indicator dots.
 */
$indicator-size: dynamic(6px);
 
/**
 * @var {color}
 * The background-color of the active indicator dot.
 */
$indicator-active-background-color: dynamic($indicator-background-color);
 
/**
 * @var {string/list}
 * The background-gradient of the active indicator dot.
 */
$indicator-active-background-gradient: dynamic($indicator-background-gradient);
 
//# fashion replaces $carousel-indicator-active-size 
/**
 * @var {measurement}
 * The size (height and width) of the active indicator dot.
 */
$indicator-active-size: dynamic($indicator-size * 2);
 
//# fashion replaces $carousel-track-size 
/**
 * @var {measurement}
 * The size of the track the indicator dots are in. The size will be used for the width
 * of a vertical indicator or the height of a horizontal indicator.
 */
$indicator-track-size: dynamic(26px);
 
//# fashion replaces $carousel-indicator-spacing 
/**
 * @var {measurement}
 * Amount of space between the indicator dots.
 */
$indicator-spacing: dynamic(3px);
 
//# fashion replaces $carousel-indicator-border-radius 
/**
 * @var {number}
 * The border-radius of the indicator dots.
 */
$indicator-border-radius: dynamic(50%);
 
//# fashion replaces $carousel-light-ui 
/**
 * @var {map}
 * Parameters for the "light" carousel UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$indicator-light-ui: dynamic((
    color: rgba(#fff, .1), 
    active-color: rgba(#fff, .3) 
));
 
//# fashion replaces $carousel-dark-ui 
/**
 * @var {map}
 * Parameters for the "dark" carousel UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$indicator-dark-ui: dynamic((
    color: rgba(#000, .1), 
    active-color: rgba(#000, .3) 
));
 
/**
 * Creates a theme UI for the indicator component.
 *
 * @param {string} $ui The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {number} $xtype The xtype of the UI being created.
 * @param {number} $margin The margin between the indicator dots.
 * @param {number} $border-radius The border radius of the indicator dots.
 * @param {number} $track-size The size of the track the indicator dots are in.
 * @param {color} $background-color The background color of the indicator dots.
 * @param {string} $background-gradient The background gradient of the indicator dots.
 * @param {number} $size The size of the indicator dots.
 * @param {color} $active-background-color The background color of the active indicator dot.
 * @param {string} $active-background-gradient The background gradient of the active indicator dot.
 * @param {number} $active-size The size of the active indicator dot.
 */
@mixin indicator-ui(
    $ui: null,
    $xtype: indicator,
 
    $margin: $indicator-spacing,
    $border-radius: $indicator-border-radius,
    $track-size: $indicator-track-size,
 
    $background-color: $indicator-background-color,
    $background-gradient: $indicator-background-gradient,
    $size: $indicator-size,
 
    $active-background-color: $indicator-active-background-color,
    $active-background-gradient: $indicator-active-background-gradient,
    $active-size: $indicator-active-size 
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        span {
            width: $size;
            height: $size;
            margin: $margin;
 
            @if $enable-border-radius {
                @include border-radius($border-radius);
            }
 
            @include background-gradient($background-color, $background-gradient);
 
            &.#{$prefix}#{$xtype}-active {
                width: $active-size;
                height: $active-size;
 
                @include background-gradient($active-background-color, $active-background-gradient);
            }
        }
 
        &.#{$prefix}#{$xtype}-horizontal {
            height: $track-size;
        }
 
        &.#{$prefix}#{$xtype}-vertical {
            width: $track-size;
        }
    }
}