// add tag name to increase specificity over x-form-trigger rules in classic/neptune themes
div.#{$prefix}form-spinner-up,
div.#{$prefix}form-spinner-down {
    background-image: theme-background-image('form/spinner');
    background-color: $form-field-background-color;
    width: $form-trigger-width;
    height: $spinner-btn-height;
}

@if $include-rtl {
    .#{$prefix}rtl.#{$prefix}form-trigger-wrap {
        .#{$prefix}form-spinner-up,
        .#{$prefix}form-spinner-down {
            background-image: theme-background-image('form/spinner-rtl');
        }
    }
}

.#{$prefix}form-spinner-down {
    background-position: 0 (-$spinner-btn-height);
}

.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
    background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
}
.#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
    background-position: (-$form-trigger-width) (-$spinner-btn-height);
}
.#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
    background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
}
.#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
    background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
}

@if $include-ext-toolbar-toolbar and $form-toolbar-field-height != $form-field-height {
    .#{$prefix}toolbar-item {

        // add tag name to increase specificity over x-form-trigger rule in classic/neptune themes
        div.#{$prefix}form-spinner-up,
        div.#{$prefix}form-spinner-down {
            background-image: theme-background-image('form/spinner-small');
            height: $spinner-toolbar-btn-height;
        }
        .#{$prefix}form-spinner-down {
            background-position: 0 (-$spinner-toolbar-btn-height);
        }
        .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
            background-position: -($form-trigger-width * 3) (-$spinner-toolbar-btn-height);
        }
        .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
            background-position: (-$form-trigger-width) (-$spinner-toolbar-btn-height);
        }
        .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
            background-position: -($form-trigger-width * 4) (-$spinner-toolbar-btn-height);
        }
        .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
            background-position: -($form-trigger-width * 2) (-$spinner-toolbar-btn-height);
        }
    }

    @if $include-rtl {
        .#{$prefix}toolbar-item .#{$prefix}rtl.#{$prefix}form-trigger-wrap {
            .#{$prefix}form-spinner-up,
            .#{$prefix}form-spinner-down {
                background-image: theme-background-image('form/spinner-small-rtl');
            }
        }
    }
}
