/**
 * @class Ext.field.Slider
 */

/**
 * @var {number/list}
 * Slider Field padding
 */
$sliderfield-padding: dynamic(5px 0 4px);

/**
 * @var {number/list}
 * Slider Field padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$sliderfield-padding-big: dynamic(2px 0);

/**
 * @var {color}
 * Slider Field {@link #boxLabel} text color
 */
$sliderfield-box-label-color: dynamic($field-box-label-color);

/**
 * @var {string/number}
 * Slider Field {@link #boxLabel} font-weight
 */
$sliderfield-box-label-font-weight: dynamic($field-box-label-font-weight);

/**
 * @var {number}
 * Slider Field {@link #boxLabel} font-size
 */
$sliderfield-box-label-font-size: dynamic($field-box-label-font-size);

/**
 * @var {number}
 * Slider Field {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$sliderfield-box-label-font-size-big: dynamic($field-box-label-font-size-big);

/**
 * @var {number}
 * Slider Field {@link #boxLabel} line-height
 */
$sliderfield-box-label-line-height: dynamic($field-box-label-line-height);

/**
 * @var {number}
 * Slider Field {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$sliderfield-box-label-line-height-big: dynamic($field-box-label-line-height-big);

/**
 * @var {string}
 * Slider Field {@link #boxLabel} font-family
 */
$sliderfield-box-label-font-family: dynamic($field-box-label-font-family);

/**
 * @var {number/list}
 * Slider Field {@link #boxLabel} padding
 * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
 */
$sliderfield-box-label-padding: dynamic(top($field-box-label-padding) right($field-box-label-padding) bottom($field-box-label-padding) 6px);

/**
 * @var {number/list}
 * Slider Field {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme
 * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
 */
$sliderfield-box-label-padding-big: dynamic(top($field-box-label-padding-big) right($field-box-label-padding-big) bottom($field-box-label-padding-big) 8px);

/**
 * @var {number}
 * Slider Field body width
 */
$sliderfield-body-width: dynamic(100px);

/**
 * @var {number}
 * Slider Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$sliderfield-body-width-big: dynamic(150px);

/**
 * Creates a visual theme for a Slider Field
 *
 * @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=sliderfield] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {number/list} $padding
 * Slider Field padding
 *
 * @param {number/list} $padding-big
 * Slider Field padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $box-label-color
 * Slider Field {@link #boxLabel} text color
 *
 * @param {string/number} $box-label-font-weight
 * Slider Field {@link #boxLabel} font-weight
 *
 * @param {number} $box-label-font-size
 * Slider Field {@link #boxLabel} font-size
 *
 * @param {number} $box-label-font-size-big
 * Slider Field {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $box-label-line-height
 * Slider Field {@link #boxLabel} line-height
 *
 * @param {number} $box-label-line-height-big
 * Slider Field {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $box-label-font-family
 * Slider Field {@link #boxLabel} font-family
 *
 * @param {number/list} $box-label-padding
 * Slider Field {@link #boxLabel} padding
 * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
 *
 * @param {number/list} $box-label-padding-big
 * Slider Field {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme
 * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
 *
 * @param {number} $body-width
 * Slider Field body width
 *
 * @param {number} $body-width-big
 * Slider Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin sliderfield-ui(
    $ui: null,
    $xtype: sliderfield,
    $padding: null,
    $padding-big: null,
    $box-label-color: null,
    $box-label-font-weight: null,
    $box-label-font-size: null,
    $box-label-font-size-big: null,
    $box-label-line-height: null,
    $box-label-line-height-big: null,
    $box-label-font-family: null,
    $box-label-padding: null,
    $box-label-padding-big: null,
    $body-width,
    $body-width-big
) {
    $ui-suffix: ui-suffix($ui);

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

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

        .#{$prefix}box-el {
            padding: $sliderfield-padding;

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

        @include box-label-ui(
            $box-label-color: $box-label-color,
            $box-label-font-weight: $box-label-font-weight,
            $box-label-font-size: $box-label-font-size,
            $box-label-font-size-big: $box-label-font-size-big,
            $box-label-line-height: $box-label-line-height,
            $box-label-line-height-big: $box-label-line-height-big,
            $box-label-font-family: $box-label-font-family,
            $box-label-padding: $box-label-padding,
            $box-label-padding-big: $box-label-padding-big
        );
    }
}