/**
 * @class Ext.dataview.listswiper.Stepper
 */

/**
 * @var {color}
 * ListSwiper stepper text color
 */
$listswiperstepper-color: dynamic($neutral-medium-dark-color);

/**
 * @var {color}
 * ListSwiper stepper text color when active
 */
$listswiperstepper-active-color: dynamic($light-color);

/**
 * @var {color}
 * ListSwiper stepper text color when in the undo state
 */
$listswiperstepper-undo-color: dynamic($listswiperstepper-active-color);

/**
 * @var {color}
 * ListSwiper stepper background-color
 */
$listswiperstepper-background-color: dynamic($neutral-light-color);

/**
 * @var {color}
 * ListSwiper stepper background-color when active
 */
$listswiperstepper-active-background-color: dynamic($active-color);

/**
 * @var {color}
 * ListSwiper stepper background-color when in the undo state
 */
$listswiperstepper-undo-background-color: dynamic($alert-color);

/**
 * @var {number/list}
 * ListSwiper stepper padding
 */
$listswiperstepper-padding: dynamic(4px 5px);

/**
 * @var {number/list}
 * ListSwiper stepper padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-padding-big: dynamic(6px 8px);

/**
 * @var {string}
 * ListSwiper stepper font-family
 */
$listswiperstepper-font-family: dynamic($font-family);

/**
 * @var {number}
 * ListSwiper stepper font-size
 */
$listswiperstepper-font-size: dynamic($listitem-font-size);

/**
 * @var {number}
 * ListSwiper stepper font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-font-size-big: dynamic($listitem-font-size-big);

/**
 * @var {string/number}
 * ListSwiper stepper font-weight
 */
$listswiperstepper-font-weight: dynamic($font-weight-bold);

/**
 * @var {number}
 * ListSwiper stepper line-height
 */
$listswiperstepper-line-height: dynamic($listitem-line-height);

/**
 * @var {number}
 * ListSwiper stepper line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-line-height-big: dynamic($listitem-line-height-big);

/**
 * @var {number/list}
 * ListSwiper stepper padding
 */
$listswiperstepper-padding: dynamic($listitem-padding);

/**
 * @var {number/list}
 * ListSwiper stepper padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-padding-big: dynamic($listitem-padding-big);

/**
 * @var {color}
 * ListSwiper stepper icon color
 */
$listswiperstepper-icon-color: dynamic(inherit);

/**
 * @var {color}
 * ListSwiper stepper icon color when active
 */
$listswiperstepper-active-icon-color: dynamic(inherit);

/**
 * @var {color}
 * ListSwiper stepper icon color when in the undo state
 */
$listswiperstepper-undo-icon-color: dynamic($listswiperstepper-active-icon-color);

/**
 * @var {number}
 * ListSwiper stepper icon size
 */
$listswiperstepper-icon-size: dynamic(16px);

/**
 * @var {number}
 * ListSwiper stepper icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-icon-size-big: dynamic(20px);

/**
 * @var {number}
 * ListSwiper stepper icon font-size. Used for configuring the size of font icons
 */
$listswiperstepper-icon-font-size: dynamic($listswiperstepper-icon-size);
/**
 * @var {number}
 * ListSwiper stepper icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-icon-font-size-big: dynamic($listswiperstepper-icon-size-big);

/**
 * @var {number}
 * The space between the ListSwiper stepper icon and text
 */
$listswiperstepper-icon-horizontal-spacing: dynamic(5px);

/**
 * @var {number}
 * The space between the ListSwiper stepper icon and text
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$listswiperstepper-icon-horizontal-spacing-big: dynamic(8px);

/**
 * @var {map}
 * Parameters for the "confirm" step swiper UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$listswiperstepper-action-ui: dynamic((
    active-background-color: $base-highlight-color
));

/**
 * @var {map}
 * Parameters for the "confirm" step swiper UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$listswiperstepper-confirm-ui: dynamic((
    active-background-color: desaturate(darken($confirm-color, 10%), 5%)
));

/**
 * @var {map}
 * Parameters for the "decline" step swiper UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$listswiperstepper-decline-ui: dynamic((
    active-background-color: desaturate(darken($alert-color, 10%), 5%)
));

/**
 * Creates a visual theme for a ListSwiperStepper.
 *
 * @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=listswiperstepper] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * ListSwiper stepper text color
 *
 * @param {color} $active-color
 * ListSwiper stepper text color when active
 *
 * @param {color} $undo-color
 * ListSwiper stepper text color when in the undo state
 *
 * @param {color} $background-color
 * ListSwiper stepper background-color
 *
 * @param {color} $active-background-color
 * ListSwiper stepper background-color when active
 *
 * @param {color} $undo-background-color
 * ListSwiper stepper background-color when in the undo state
 *
 * @param {number/list} $padding
 * ListSwiper stepper padding
 *
 * @param {number/list} $padding-big
 * ListSwiper stepper padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * ListSwiper stepper font-family
 *
 * @param {number} $font-size
 * ListSwiper stepper font-size
 *
 * @param {number} $font-size-big
 * ListSwiper stepper font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/number} $font-weight
 * ListSwiper stepper font-weight
 *
 * @param {number} $line-height
 * ListSwiper stepper line-height
 *
 * @param {number} $line-height-big
 * ListSwiper stepper line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $icon-color
 * ListSwiper stepper icon color
 *
 * @param {color} $active-icon-color
 * ListSwiper stepper icon color when active
 *
 * @param {color} $undo-icon-color
 * ListSwiper stepper icon color when in the undo state
 *
 * @param {number} $icon-size
 * ListSwiper stepper icon size.
 *
 * @param {number} $icon-size-big
 * ListSwiper stepper icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * ListSwiper stepper icon font-size
 *
 * @param {number} $icon-font-size-big
 * ListSwiper stepper icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-horizontal-spacing
 * The space between the ListSwiper stepper icon and text
 *
 * @param {number} $icon-horizontal-spacing-big
 * The space between the ListSwiper stepper icon and text
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin listswiperstepper-ui(
    $ui: null,
    $xtype: listswiperstepper,
    $color: null,
    $active-color: null,
    $undo-color: null,
    $background-color: null,
    $active-background-color: null,
    $undo-background-color: null,
    $padding: null,
    $padding-big: null,
    $font-family: null,
    $font-size: null,
    $font-size-big: null,
    $font-weight: null,
    $line-height: null,
    $line-height-big: null,
    $icon-color: null,
    $active-icon-color: null,
    $undo-icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $icon-horizontal-spacing: null,
    $icon-horizontal-spacing-big: null
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        @include font($font-weight, $font-size, $line-height, $font-family);
        background-color: $background-color;
        color: $color;

        @if $enable-big {
            .#{$prefix}big & {
                font-size: $font-size-big;
                line-height: $line-height-big;
            }
        }
    }

    .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el .#{$prefix}icon-el {
        @include icon($font-size: $icon-font-size, $font-size-big: $icon-font-size-big);

        color: $icon-color;
        height: $icon-size;
        width: $icon-size;

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

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        &.#{$prefix}side-left .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el {
            margin-right: $icon-horizontal-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-right: $icon-horizontal-spacing-big;
                }
            }
        }

        &.#{$prefix}side-right .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el {
            margin-left: $icon-horizontal-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-left: $icon-horizontal-spacing-big;
                }
            }
        }

        &.#{$prefix}undo {
            color: $undo-color;
            background-color: $undo-background-color;

            .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el .#{$prefix}icon-el {
                color: $undo-icon-color;
            }
        }

        &.#{$prefix}active {
            color: $active-color;
            background-color: $active-background-color;

            .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el .#{$prefix}icon-el {
                color: $active-icon-color;
            }
        }
    }

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

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