/**
 * @class Ext.field.trigger.Trigger
 */

/**
 * @var {number}
 * Trigger width
 */
$trigger-width: dynamic(22px);

/**
 * @var {number}
 * Trigger width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$trigger-width-big: dynamic(30px);

/**
 * @var {color}
 * Trigger background-color
 */
$trigger-background-color: dynamic(null);

/**
 * @var {color}
 * Trigger background-color when hovered
 */
$trigger-hovered-background-color: dynamic(null);

/**
 * @var {color}
 * Trigger background-color when pressed
 */
$trigger-pressed-background-color: dynamic(null);

/**
 * @var {string}
 * Trigger icon
 */
$trigger-icon: dynamic($fa-var-caret-down);

/**
 * @var {color}
 * Trigger icon color
 */
$trigger-icon-color: dynamic($neutral-dark-color);

/**
 * @var {color}
 * Trigger icon color when hovered
 */
$trigger-hovered-icon-color: dynamic(mix(#000, $trigger-icon-color, 8%));

/**
 * @var {color}
 * Trigger icon color when pressed
 */
$trigger-pressed-icon-color: dynamic(mix(#000, $trigger-icon-color, 15%));

/**
 * @var {color}
 * Trigger icon background-color
 */
$trigger-icon-background-color: dynamic(null);

/**
 * @var {color}
 * Trigger icon background-color when hovered
 */
$trigger-hovered-icon-background-color: dynamic(null);

/**
 * @var {color}
 * Trigger icon background-color when pressed
 */
$trigger-pressed-icon-background-color: dynamic(null);

/**
 * @var {number/list}
 * Trigger icon border-radius
 */
$trigger-icon-border-radius: dynamic(null);

/**
 * @var {number}
 * Trigger icon size
 */
$trigger-icon-size: dynamic(16px);

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

/**
 * @var {number}
 * Trigger icon font-size
 */
$trigger-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Trigger icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$trigger-icon-font-size-big: dynamic(null);

/**
 * @var {map}
 * Parameters for the "alt" textfield trigger UI.
 */
$trigger-alt-ui: dynamic((
    width: 40px,
    width-big: 45px,
    icon-color: rgba(255, 255, 255, .6),
    hovered-icon-color: rgba(255, 255, 255, .6),
    pressed-icon-color: rgba(255, 255, 255, .6)
));

/**
 * @var {map}
 * Parameters for the "faded" textfield trigger UI.
 */
$trigger-faded-ui: dynamic((
    width: 40px,
    width-big: 45px,
    icon-color: rgba(0, 0, 0, .4),
    hovered-icon-color: rgba(0, 0, 0, .4),
    pressed-icon-color: rgba(0, 0, 0, .4)
));

/**
 * @var {map}
 * Parameters for the "solo" textfield trigger UI.
 */
$trigger-solo-ui: dynamic((
    width: 40px,
    width-big: 40px,
    icon-color: rgba(0, 0, 0, .4),
    hovered-icon-color: rgba(0, 0, 0, .4),
    pressed-icon-color: rgba(0, 0, 0, .4)
));

/**
 * Creates a visual theme for a Trigger.
 *
 * @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=trigger] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {number} $width
 * Trigger width
 *
 * @param {number} $width-big
 * Trigger width in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $background-color
 * Trigger background-color
 *
 * @param {color} $hovered-background-color
 * Trigger background-color when hovered
 *
 * @param {color} $pressed-background-color
 * Trigger background-color when pressed
 *
 * @param {string} $icon
 * Trigger icon
 *
 * @param {color} $icon-color
 * Trigger icon color
 *
 * @param {color} $hovered-icon-color
 * Trigger icon color when hovered
 *
 * @param {color} $pressed-icon-color
 * Trigger icon color when pressed
 *
 * @param {color} $icon-background-color
 * Trigger icon background-color
 *
 * @param {color} $hovered-icon-background-color
 * Trigger icon background-color when hovered
 *
 * @param {color} $pressed-icon-background-color
 * Trigger icon background-color when pressed
 *
 * @param {number/list} $icon-border-radius
 * Trigger icon border-radius
 *
 * @param {number} $icon-size
 * Trigger icon size
 *
 * @param {number} $icon-size-big
 * Trigger icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Trigger icon font-size
 *
 * @param {number} $icon-font-size-big
 * Trigger icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin trigger-ui(
    $ui: null,
    $xtype: trigger,
    $width: null,
    $width-big: null,
    $background-color: null,
    $hovered-background-color: null,
    $pressed-background-color: null,
    $icon: null,
    $icon-color: null,
    $hovered-icon-color: null,
    $pressed-icon-color: null,
    $icon-background-color: null,
    $hovered-icon-background-color: null,
    $pressed-icon-background-color: null,
    $icon-border-radius: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null
) {
    $ui-suffix: ui-suffix($ui);

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

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

        .#{$prefix}icon-el {
            background-color: $icon-background-color;
            border-radius: $icon-border-radius;

            @include icon(
                $icon: $icon,
                $color: $icon-color,
                $size: $icon-size,
                $size-big: $icon-size-big,
                $font-size: $icon-font-size,
                $font-size-big: $icon-font-size-big
            );
        }

        &.#{$prefix}interactive {
            &:hover {
                background-color: $hovered-background-color;

                .#{$prefix}icon-el {
                    color: $hovered-icon-color;
                    background-color: $hovered-icon-background-color;
                }
            }

            &:active {
                background-color: $pressed-background-color;

                .#{$prefix}icon-el {
                    color: $pressed-icon-color;
                    background-color: $pressed-icon-background-color;
                }
            }
        }
    }
}


// Non-UI variables - these variables do not correspond to a UI mixin parameter

/**
 * @var {'horizontal'/'vertical'}
 * The alignment of {@link #grouped} triggers
 */
$trigger-grouped-align: dynamic(vertical);

/**
 * @var {'horizontal'/'vertical'}
 * The alignment of {@link #grouped} triggers in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$trigger-grouped-align-big: dynamic(horizontal);