/*! * Copyright 2024 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ .spectrum-Stepper--quiet{--spectrum-stepper-buttons-border-style:none;--spectrum-stepper-button-edge-to-fill:0}.spectrum-Stepper{--spectrum-stepper-border-width:var(--spectrum-border-width-100);--spectrum-stepper-border-color-default:var(--spectrum-gray-500);--spectrum-stepper-border-color-hover:var(--spectrum-gray-600);--spectrum-stepper-border-color-focus:var(--spectrum-gray-800);--spectrum-stepper-border-color-focus-hover:var(--spectrum-gray-900);--spectrum-stepper-border-color-keyboard-focus:var(--spectrum-gray-800);--spectrum-stepper-buttons-border-style:none;--spectrum-stepper-buttons-border-width:0;--spectrum-stepper-buttons-border-color:var(--spectrum-gray-500);--spectrum-stepper-buttons-background-color:var(--spectrum-gray-100);--spectrum-stepper-buttons-border-color-hover:var(--spectrum-gray-600);--spectrum-stepper-buttons-border-color-focus:var(--spectrum-gray-800);--spectrum-stepper-buttons-border-color-keyboard-focus:var(--spectrum-gray-800);--spectrum-stepper-button-border-width:var(--spectrum-border-width-100);--spectrum-stepper-border-color-invalid:var(--spectrum-negative-border-color-default);--spectrum-stepper-border-color-focus-invalid:var(--spectrum-negative-border-color-focus);--spectrum-stepper-border-color-focus-hover-invalid:var(--spectrum-negative-border-color-focus-hover);--spectrum-stepper-border-color-keyboard-focus-invalid:var(--spectrum-negative-border-color-key-focus);--spectrum-stepper-border-color-disabled:var(--spectrum-gray-300);--spectrum-stepper-button-border-width-disabled:var(--spectrum-border-width-200);--spectrum-stepper-buttons-background-color-disabled:var(--spectrum-gray-50)}@media (forced-colors:active){.spectrum-Stepper{--highcontrast-stepper-border-color:CanvasText;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:CanvasText;--highcontrast-stepper-focus-indicator-color:Highlight}.spectrum-Stepper.is-invalid{--highcontrast-stepper-border-color:Highlight;--highcontrast-stepper-border-color-hover:Highlight;--highcontrast-stepper-border-color-focus:Highlight;--highcontrast-stepper-border-color-focus-hover:Highlight;--highcontrast-stepper-border-color-keyboard-focus:Highlight}.spectrum-Stepper.is-disabled{--highcontrast-stepper-border-color:GrayText;--highcontrast-stepper-buttons-border-width:var(--mod-stepper-border-width,var(--spectrum-stepper-border-width))}.spectrum-Stepper.is-focused:not(.is-disabled),.spectrum-Stepper:not(.is-disabled):focus{--highcontrast-stepper-border-color:var(--highcontrast-stepper-border-color-focus)}@media (hover:hover){.spectrum-Stepper:not(.is-disabled):hover{--highcontrast-stepper-border-color:var(--highcontrast-stepper-border-color-hover)}.spectrum-Stepper.is-focused:not(.is-disabled):hover,.spectrum-Stepper:not(.is-disabled):focus:hover{--highcontrast-stepper-border-color:var(--highcontrast-stepper-border-color-focus-hover)}}.spectrum-Stepper.is-keyboardFocused:not(.is-disabled),.spectrum-Stepper:not(.is-disabled):focus-visible{--highcontrast-stepper-border-color:var(--highcontrast-stepper-border-color-keyboard-focus)}.spectrum-Stepper-input{--highcontrast-textfield-border-color:var(--highcontrast-stepper-border-color)}.spectrum-Stepper-button{--highcontrast-infield-button-border-color:var(--highcontrast-stepper-border-color);--highcontrast-infield-button-border-color-active:var(--highcontrast-stepper-border-color)}}.spectrum-Stepper{--spectrum-stepper-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color,var(--spectrum-stepper-border-color-default)));--spectrum-stepper-border-radius:var(--mod-stepper-border-radius,var(--spectrum-corner-radius-100));--spectrum-stepper-focus-indicator-width:var(--mod-stepper-focus-indicator-width,var(--spectrum-focus-indicator-thickness));--spectrum-stepper-focus-indicator-gap:var(--mod-stepper-focus-indicator-gap,var(--spectrum-focus-indicator-gap));--spectrum-stepper-focus-indicator-color:var(--highcontrast-stepper-focus-indicator-color,var(--mod-stepper-focus-indicator-color,var(--spectrum-focus-indicator-color)));--spectrum-stepper-animation-duration:var(--mod-stepper-animation-duration,var(--spectrum-animation-duration-100))}.spectrum-Stepper,.spectrum-Stepper.spectrum-Stepper--sizeM{--spectrum-stepper-button-width:var(--mod-stepper-button-width,var(--spectrum-in-field-button-width-stacked-medium));--spectrum-stepper-height:var(--mod-stepper-height,var(--spectrum-component-height-100))}.spectrum-Stepper.spectrum-Stepper--sizeS{--spectrum-stepper-button-width:var(--mod-stepper-button-width,var(--spectrum-in-field-button-width-stacked-small));--spectrum-stepper-height:var(--mod-stepper-height,var(--spectrum-component-height-75))}.spectrum-Stepper.spectrum-Stepper--sizeL{--spectrum-stepper-button-width:var(--mod-stepper-button-width,var(--spectrum-in-field-button-width-stacked-large));--spectrum-stepper-height:var(--mod-stepper-height,var(--spectrum-component-height-200))}.spectrum-Stepper.spectrum-Stepper--sizeXL{--spectrum-stepper-button-width:var(--mod-stepper-button-width,var(--spectrum-in-field-button-width-stacked-extra-large));--spectrum-stepper-height:var(--mod-stepper-height,var(--spectrum-component-height-300))}.spectrum-Stepper.is-disabled{--spectrum-stepper-buttons-border-width:var(--spectrum-stepper-button-border-width-disabled);--spectrum-stepper-buttons-background-color:var(--spectrum-stepper-buttons-background-color-disabled)}.spectrum-Stepper.is-invalid{--mod-stepper-border-color:var(--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default));--mod-stepper-border-color-hover:var(--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover));--mod-stepper-border-color-focus:var(--mod-stepper-border-color-focus-invalid,var(--spectrum-negative-border-color-focus));--mod-stepper-border-color-focus-hover:var(--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-negative-border-color-focus-hover));--mod-stepper-border-color-keyboard-focus:var(--mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-negative-border-color-key-focus))}.spectrum-Stepper.is-focused:not(.is-disabled),.spectrum-Stepper:not(.is-disabled):focus{--mod-stepper-border-color:var(--highcontrast-stepper-border-color-focus,var(--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)));--mod-stepper-buttons-border-color:var(--highcontrast-stepper-border-color-focus,var(--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus)))}.spectrum-Stepper.is-keyboardFocused:not(.is-disabled){--mod-stepper-border-color:var(--highcontrast-stepper-border-color-focus,var(--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-keyboard-focus)))}.spectrum-Stepper.spectrum-Stepper--quiet{--mod-stepper-buttons-background-color:transparent}.spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled){--mod-stepper-focus-indicator-visibility:visible}.spectrum-Stepper.spectrum-Stepper--quiet.is-invalid{--mod-stepper-border-color:var(--mod-stepper-border-color-invalid,var(--spectrum-negative-border-color-default))}.spectrum-Stepper{--mod-infield-button-border-color:var(--mod-stepper-buttons-border-color,var(--spectrum-stepper-buttons-border-color));--mod-infield-button-border-color-quiet-disabled:var(--spectrum-disabled-border-color);--mod-infield-button-border-width:var(--mod-stepper-button-border-width,var(--spectrum-stepper-button-border-width));--mod-textfield-border-width:var(--mod-stepper-border-width,var(--spectrum-stepper-border-width));--mod-textfield-border-color:var(--spectrum-stepper-border-color)}.spectrum-Stepper:not(.spectrum-Stepper--quiet){--mod-textfield-border-color-disabled:var(--spectrum-stepper-border-color-disabled)}.spectrum-Stepper:not(.is-disabled) .is-focused,.spectrum-Stepper:not(.is-disabled):focus{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color-focus,var(--mod-stepper-buttons-border-color-focus,var(--spectrum-stepper-buttons-border-color-focus)));--mod-textfield-focus-indicator-width:0}.spectrum-Stepper.is-keyboardFocused:not(.is-disabled),.spectrum-Stepper:not(.is-disabled):focus-visible{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--mod-stepper-buttons-border-color-keyboard-focus,var(--spectrum-stepper-buttons-border-color-keyboard-focus)));--mod-textfield-focus-indicator-width:0;--mod-textfield-border-color:var(--highcontrast-stepper-border-color-keyboard-focus,var(--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus)));outline:var(--spectrum-stepper-focus-indicator-width) solid;outline-color:var(--spectrum-stepper-focus-indicator-color);outline-offset:var(--spectrum-stepper-focus-indicator-gap)}.spectrum-Stepper.is-invalid{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-invalid,var(--spectrum-stepper-border-color-invalid)));--mod-textfield-icon-spacing-inline-start-invalid:0}.spectrum-Stepper.is-invalid.is-focused,.spectrum-Stepper.is-invalid:focus{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-focus-invalid,var(--spectrum-stepper-border-color-focus-invalid)))}.spectrum-Stepper.is-invalid.is-keyboardFocused,.spectrum-Stepper.is-invalid:focus-visible{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-keyboard-focus-invalid,var(--spectrum-stepper-border-color-keyboard-focus-invalid)))}.spectrum-Stepper.spectrum-Stepper--quiet{--mod-infield-button-width-stacked:var(--mod-stepper-button-width-quiet,var(--spectrum-stepper-button-width));--mod-infield-button-border-color:var(--spectrum-stepper-border-color);--mod-infield-button-border-color-quiet:var(--spectrum-stepper-border-color);--mod-infield-button-border-block-end-width:var(--mod-stepper-border-width,var(--spectrum-stepper-border-width));--mod-infield-button-stacked-bottom-border-block-end-width:var(--mod-stepper-border-width,var(--spectrum-stepper-border-width));--mod-infield-button-stacked-bottom-border-radius-end-end:0;--mod-infield-button-stacked-bottom-border-radius-end-start:0;--mod-infield-button-fill-justify-content:flex-end;--mod-infield-button-inner-edge-to-fill:var(--spectrum-stepper-button-edge-to-fill);--mod-infield-button-edge-to-fill:var(--spectrum-stepper-button-edge-to-fill);--mod-textfield-focus-indicator-color:transparent;--mod-textfield-background-color:transparent;--mod-textfield-border-color-hover:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)))}.spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled),.spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-focus,var(--spectrum-stepper-border-color-focus))) /* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */}.spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled){--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-keyboard-focus,var(--spectrum-stepper-border-color-keyboard-focus))) /* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */}@media (hover:hover){.spectrum-Stepper:not(.is-disabled):hover{--mod-stepper-border-color:var(--highcontrast-stepper-border-color-hover,var(--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)))}.spectrum-Stepper.is-focused:not(.is-disabled):hover,.spectrum-Stepper:not(.is-disabled):focus:hover{--mod-stepper-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)));--mod-stepper-buttons-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)))}.spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover{--mod-stepper-buttons-background-color:transparent}.spectrum-Stepper:hover:not(.is-invalid,.is-disabled,.is-focused){--mod-infield-button-border-color:var(--mod-stepper-buttons-border-color-hover,var(--spectrum-stepper-buttons-border-color-hover))}.spectrum-Stepper:not(.is-disabled) .is-focused:hover,.spectrum-Stepper:not(.is-disabled):focus:hover{ /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- allows for --spectrum-stepper-buttons-border-color-focus-hover to be defined outside of current context */--mod-infield-button-border-color:var(--mod-stepper-buttons-border-color-focus-hover,var(--spectrum-stepper-buttons-border-color-focus-hover));--mod-textfield-focus-indicator-width:0;--mod-textfield-border-color:var(--highcontrast-stepper-border-color-focus-hover,var(--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)))}.spectrum-Stepper.is-invalid:hover{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-hover-invalid,var(--spectrum-negative-border-color-hover)))}.spectrum-Stepper.is-invalid.is-focused:hover,.spectrum-Stepper.is-invalid:focus:hover{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-focus-hover-invalid,var(--spectrum-stepper-border-color-focus-hover-invalid)))}.spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover{--mod-textfield-border-color-hover:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)));--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)))}.spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled):hover,.spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-focus-hover,var(--spectrum-stepper-border-color-focus-hover)))}.spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover{--mod-infield-button-border-color:var(--highcontrast-stepper-border-color,var(--mod-stepper-border-color-hover,var(--spectrum-stepper-border-color-hover)))}}.spectrum-Stepper{--spectrum-stepper-width:var(--mod-stepper-width,calc(var(--spectrum-stepper-height)*var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width))*2));position:relative;display:inline-flex;flex-flow:row nowrap;inline-size:var(--spectrum-stepper-width);block-size:var(--spectrum-stepper-height);border-radius:var(--spectrum-stepper-border-radius)}.spectrum-Stepper:before{content:""}.spectrum-Stepper-input{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-width:0}.spectrum-Stepper-buttons{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;block-size:var(--spectrum-stepper-height);inline-size:var(--spectrum-stepper-button-width);border-color:var(--spectrum-stepper-border-color);border-style:var(--mod-stepper-buttons-border-style,var(--spectrum-stepper-buttons-border-style));border-width:var(--highcontrast-stepper-buttons-border-width,var(--mod-stepper-buttons-border-width,var(--spectrum-stepper-buttons-border-width)));border-inline-start-width:0;background-color:var(--mod-stepper-buttons-background-color,var(--spectrum-stepper-buttons-background-color));transition:border-color var(--spectrum-stepper-animation-duration) ease-in-out} /* stylelint-disable-next-line selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */.spectrum-Stepper-buttons,.spectrum-Stepper.hide-stepper .spectrum-Stepper-input{border-start-end-radius:var(--spectrum-stepper-border-radius);border-end-end-radius:var(--spectrum-stepper-border-radius)}.spectrum-Stepper.hide-stepper .spectrum-Stepper-input{border-inline-end-width:var(--mod-stepper-border-width,var(--spectrum-stepper-border-width))}.spectrum-Stepper--quiet{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:0;border-end-end-radius:0 /* stylelint-disable selector-class-pattern -- @todo update hide-stepper class to standard variant syntax */}.spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input{border-inline-end-width:0;border-end-end-radius:0} /* stylelint-enable selector-class-pattern */.spectrum-Stepper--quiet:after{visibility:hidden;visibility:var(--mod-stepper-focus-indicator-visibility,hidden);content:"";position:absolute;inset-block-end:calc((var(--spectrum-stepper-focus-indicator-gap) + var(--spectrum-stepper-focus-indicator-width))*-1);inset-inline-start:0;inline-size:100%;block-size:var(--spectrum-stepper-focus-indicator-width);background-color:var(--spectrum-stepper-focus-indicator-color)}.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled){outline:none}