/**
 * @class Ext.field.Toggle
 */

/**
 * @var {number}
 * The width of the toggle slider
 */
$toggleslider-width: dynamic(26px);

/**
 * @var {number}
 * The width of the toggle slider in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$toggleslider-width-big: dynamic(45px);

/**
 * @var {number}
 * The height of the toggle slider track
 */
$toggleslider-track-height: dynamic(null);

/**
 * @var {number}
 * The height of the toggle slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$toggleslider-track-height-big: dynamic(null);

/**
 * @var {color/list}
 * The background-color of the toggle slider track
 */
$toggleslider-track-background-color: dynamic(null);

/**
 * @var {number/list}
 * The border-width of the toggle slider track
 */
$toggleslider-track-border-width: dynamic(null);

/**
 * @var {string/list}
 * The border-style of the toggle slider track
 */
$toggleslider-track-border-style: dynamic(null);

/**
 * @var {color/list}
 * The border-color of the toggle slider track
 */
$toggleslider-track-border-color: dynamic(null);

/**
 * @var {number}
 * The border-radius of the toggle slider track
 */
$toggleslider-track-border-radius: dynamic(null);

/**
 * @var {number}
 * The border-radius of the toggle slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$toggleslider-track-border-radius-big: dynamic(null);

/**
 * @var {color}
 * The background-color of the toggle slider fill element
 */
$toggleslider-fill-background-color: dynamic(null);

/**
 * @var {color}
 * The background-color of the toggle slider fill element when disabled
 */
$toggleslider-disabled-fill-background-color: dynamic(null);

/**
 * @var {color}
 * The border-color of the toggle slider fill element
 */
$toggleslider-fill-border-color: dynamic(null);

/**
 * @var {color}
 * The border-color of the toggle slider fill element when disabled
 */
$toggleslider-disabled-fill-border-color: dynamic(null);

/**
 * @var {number}
 * Opacity of the toggle slider when disabled
 */
$toggleslider-disabled-opacity: dynamic(null);

/**
 * @var {number}
 * Amount of space to inset the toggle thumb from the left and right edge of the track
 */
$toggleslider-thumb-inset: dynamic(null);


/**
 * Creates a visual theme for a toggle 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=toggleslider] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {number} $width
 * The width of the toggle slider
 *
 * @param {number} $width-big
 * The width of the toggle slider in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $track-height
 * The height of the toggle slider track
 *
 * @param {number} $track-height-big
 * The height of the toggle slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color/list} $track-background-color
 * The background-color of the toggle slider track
 *
 * @param {number/list} $track-border-width
 * The border-width of the toggle slider track
 *
 * @param {string/list} $track-border-style
 * The border-style of the toggle slider track
 *
 * @param {color/list} $track-border-color
 * The border-color of the toggle slider track
 *
 * @param {number} $track-border-radius
 * The border-radius of the toggle slider track
 *
 * @param {number} $track-border-radius-big
 * The border-radius of the toggle slider track in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $fill-background-color
 * The background-color of the toggle slider fill element
 *
 * @param {color} $disabled-fill-background-color
 * The background-color of the toggle slider fill element when disabled
 *
 * @param {color} $fill-border-color
 * The border-color of the toggle slider fill element
 *
 * @param {color} $disabled-fill-border-color
 * The border-color of the toggle slider fill element when disabled
 *
 * @param {number} $disabled-opacity
 * Opacity of the toggle slider when disabled
 *
 * @param {number} $thumb-inset
 * Inset of thumb
 *
 * @member Ext.field.Toggle
 */
@mixin toggleslider-ui(
    $ui: null,
    $xtype: toggleslider,

    $width: null,
    $width-big: null,

    $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,
    $thumb-inset: null
) {
    $ui-suffix: ui-suffix($ui);

    $arguments: intersect-arguments(toggleslider-ui, slider-ui);

    @include slider-ui($arguments...);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        width: $width;

        @if $enable-big {
            .#{$prefix}big & {
                width: $width-big;
            }
        }

        .#{$prefix}track-el,
        .#{$prefix}fill-el {
            border-radius: $track-border-radius;

            @if $enable-big {
                .#{$prefix}big & {
                    border-radius: $track-border-radius;
                }
            }
        }


        @if $ui == null and $track-border-width == null {
            $track-border-width: $slider-track-border-width;
        }

        .#{$prefix}fill-el {
            @if $track-border-width != null {
                width: calc(100% + #{horizontal($track-border-width)});
            } @else {
                width: 100%;
            }
        }

        @if $thumb-inset != null {
            .#{$prefix}thumb-wrap-el {
                margin: 0 $thumb-inset;
            }
        }
    }

}