/**
 * @class Ext.slider.Slider
 */
 
/**
 * @var {number}
 * The height of the slider track
 */
$slider-track-height: dynamic(0.6925rem);
 
/**
 * @var {number}
 * The height of the slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$slider-track-height-big: dynamic(1.2rem);
 
/**
 * @var {color/list}
 * The background-color of the slider track
 */
$slider-track-background-color: dynamic($neutral-light-color);
 
/**
 * @var {number/list}
 * The border-width of the slider track
 */
$slider-track-border-width: dynamic(1px);
 
/**
 * @var {string/list}
 * The border-style of the slider track
 */
$slider-track-border-style: dynamic(solid);
 
/**
 * @var {color/list}
 * The border-color of the slider track
 */
$slider-track-border-color: dynamic(mix(#000, $neutral-color, 6%));
 
/**
 * @var {number}
 * The border-radius of the slider track
 */
$slider-track-border-radius: dynamic($slider-track-height / 2);
 
/**
 * @var {number}
 * The border-radius of the slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$slider-track-border-radius-big: dynamic($slider-track-height-big / 2);
 
/**
 * @var {color}
 * The background-color of the fill element
 */
$slider-fill-background-color: dynamic(mix(#fff, $base-light-color, 25%));
 
/**
 * @var {color}
 * The background-color of the fill element when disabled
 */
$slider-disabled-fill-background-color: dynamic(null);
 
/**
 * @var {color}
 * The border-color of the fill element
 */
$slider-fill-border-color: dynamic($slider-track-border-color);
 
/**
 * @var {color}
 * The border-color of the fill element when disabled
 */
$slider-disabled-fill-border-color: dynamic(null);
 
/**
 * @var {number}
 * Opacity of the slider when disabled
 */
$slider-disabled-opacity: dynamic(.3);
 
/**
 * Creates a visual theme for a Slider.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=slider] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {number} $track-height
 * The height of the slider track
 *
 * @param {number} $track-height-big
 * The height of the slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color/list} $track-background-color
 * The background-color of the slider track
 *
 * @param {number/list} $track-border-width
 * The border-width of the slider track
 *
 * @param {string/list} $track-border-style
 * The border-style of the slider track
 *
 * @param {color/list} $track-border-color
 * The border-color of the slider track
 *
 * @param {number} $track-border-radius
 * The border-radius of the slider track
 *
 * @param {number} $track-border-radius-big
 * The border-radius of the slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $fill-background-color
 * The background-color of the fill element
 *
 * @param {color} $disabled-fill-background-color
 * The background-color of the fill element when disabled
 *
 * @param {color} $fill-border-color
 * The border-color of the fill element
 *
 * @param {color} $disabled-fill-border-color
 * The border-color of the fill element when disabled
 *
 * @param {number} $disabled-opacity
 * Opacity of the slider when disabled
 */
@mixin slider-ui(
    $ui: null,
    $xtype: slider,
    $track-height: null,
    $track-height-big: null,
    $track-background-color: null,
    $track-border-width: null,
    $track-border-style: null,
    $track-border-color: null,
    $track-border-radius: null,
    $track-border-radius-big: null,
 
    $fill-background-color: null,
    $disabled-fill-background-color: null,
    $fill-border-color: null,
    $disabled-fill-border-color: null,
 
    $disabled-opacity: null
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}track-el {
            height: $track-height;
            background-color: $track-background-color;
 
            @include border($track-border-width, $track-border-style, $track-border-color);
            border-radius: $track-border-radius;
 
            @if $enable-big {
                .#{$prefix}big & {
                    height: $track-height-big;
                    @include border-radius($track-border-radius-big);
                }
            }
        }
 
        .#{$prefix}fill-el {
            height: $track-height;
            background-color: $fill-background-color;
            @include border($track-border-width, $track-border-style, $fill-border-color);
            border-radius: $track-border-radius;
 
            @if $track-border-width != null {
                margin: #{-(top($track-border-width))} 0 0 #{-(left($track-border-width))};
            }
 
            @if $enable-big {
                .#{$prefix}big & {
                    height: $track-height-big;
                    border-radius: $track-border-radius-big;
                }
            }
        }
 
        &.#{$prefix}disabled {
            opacity: $disabled-opacity;
 
            .#{$prefix}fill-el {
                background-color: $disabled-fill-background-color;
                @include border($track-border-width, $track-border-style, $disabled-fill-border-color);
            }
        }
    }
}