@spectrum-web-components/picker/src/spectrum-picker.css.dev.js

An `<sp-picker>` is an alternative to HTML's `<select>` element. Use [`<sp-menu-item>`](../menu-item) elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.

"use strict";
import { css } from "@spectrum-web-components/base";
const styles = css`
    #button{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mod-button-font-family,var(--mod-sans-font-family-stack,var(--spectrum-sans-font-family-stack)));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--mod-button-line-height,var(--mod-line-height-100,var(--spectrum-line-height-100)));text-transform:none;vertical-align:top;-webkit-appearance:button;transition:background var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,border-color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,color var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out,box-shadow var(--mod-button-animation-duration,var(--mod-animation-duration-100,var(--spectrum-animation-duration-100)))ease-out;justify-content:center;align-items:center;margin:0;-webkit-text-decoration:none;text-decoration:none;display:inline-flex;position:relative;overflow:visible}#button::-moz-focus-inner{border-style:none;padding:0}#button:focus{outline:none}:host{--spectrum-picker-font-size:var(--spectrum-font-size-100);--spectrum-picker-font-weight:var(--spectrum-regular-font-weight);--spectrum-picker-placeholder-font-style:var(--spectrum-default-font-style);--spectrum-picker-line-height:var(--spectrum-line-height-100);--spectrum-picker-block-size:var(--spectrum-component-height-100);--spectrum-picker-inline-size:var(--spectrum-field-width);--spectrum-picker-border-radius:var(--spectrum-corner-radius-100);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-100);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-100);--spectrum-picker-spacing-edge-to-text-quiet:var(--spectrum-field-edge-to-text-quiet);--spectrum-picker-spacing-label-to-picker:var(--spectrum-field-label-to-component);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-medium);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-medium);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-medium);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-medium);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-medium);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-100);--spectrum-picker-spacing-edge-to-disclosure-icon-quiet:var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);--spectrum-picker-animation-duration:var(--spectrum-animation-duration-100);--spectrum-picker-font-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-font-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-font-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-font-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-font-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-font-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-icon-color-default:var(--spectrum-neutral-content-color-default);--spectrum-picker-icon-color-default-open:var(--spectrum-neutral-content-color-focus);--spectrum-picker-icon-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-picker-icon-color-hover-open:var(--spectrum-neutral-content-color-focus-hover);--spectrum-picker-icon-color-active:var(--spectrum-neutral-content-color-down);--spectrum-picker-icon-color-key-focus:var(--spectrum-neutral-content-color-key-focus);--spectrum-picker-border-color-error-default:var(--spectrum-negative-border-color-default);--spectrum-picker-border-color-error-default-open:var(--spectrum-negative-border-color-focus);--spectrum-picker-border-color-error-hover:var(--spectrum-negative-border-color-hover);--spectrum-picker-border-color-error-hover-open:var(--spectrum-negative-border-color-focus-hover);--spectrum-picker-border-color-error-active:var(--spectrum-negative-border-color-down);--spectrum-picker-border-color-error-key-focus:var(--spectrum-negative-border-color-key-focus);--spectrum-picker-icon-color-error:var(--spectrum-negative-visual-color);--spectrum-picker-background-color-disabled:var(--spectrum-disabled-background-color);--spectrum-picker-font-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-icon-color-disabled:var(--spectrum-disabled-content-color);--spectrum-picker-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-picker-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);--spectrum-picker-focus-indicator-color:var(--spectrum-focus-indicator-color)}:host([size=s]){--spectrum-picker-font-size:var(--spectrum-font-size-75);--spectrum-picker-block-size:var(--spectrum-component-height-75);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-75);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-75);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-75);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-75);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-small);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-small);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-small);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-small);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-small);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-75);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-75)}:host([size=l]){--spectrum-picker-font-size:var(--spectrum-font-size-200);--spectrum-picker-block-size:var(--spectrum-component-height-200);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-200);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-200);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-200);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-200);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-200);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-200)}:host([size=xl]){--spectrum-picker-font-size:var(--spectrum-font-size-300);--spectrum-picker-block-size:var(--spectrum-component-height-300);--spectrum-picker-spacing-top-to-text:var(--spectrum-component-top-to-text-300);--spectrum-picker-spacing-bottom-to-text:var(--spectrum-component-bottom-to-text-300);--spectrum-picker-spacing-edge-to-text:var(--spectrum-component-edge-to-text-300);--spectrum-picker-spacing-text-to-icon:var(--spectrum-text-to-visual-300);--spectrum-picker-spacing-text-to-icon-inline-end:var(--spectrum-field-text-to-alert-icon-extra-large);--spectrum-picker-spacing-icon-to-disclosure-icon:var(--spectrum-picker-visual-to-disclosure-icon-extra-large);--spectrum-picker-spacing-label-to-picker-quiet:var(--spectrum-field-label-to-component-quiet-extra-large);--spectrum-picker-spacing-top-to-alert-icon:var(--spectrum-field-top-to-alert-icon-extra-large);--spectrum-picker-spacing-top-to-progress-circle:var(--spectrum-field-top-to-progress-circle-extra-large);--spectrum-picker-spacing-top-to-disclosure-icon:var(--spectrum-field-top-to-disclosure-icon-300);--spectrum-picker-spacing-edge-to-disclosure-icon:var(--spectrum-field-end-edge-to-disclosure-icon-300)}@media (forced-colors:active){:host{--highcontrast-picker-focus-indicator-color:Highlight;--highcontrast-picker-border-color-default:ButtonBorder;--highcontrast-picker-border-color-hover:Highlight;--highcontrast-picker-border-color-disabled:GrayText;--highcontrast-picker-content-color-default:ButtonText;--highcontrast-picker-content-color-disabled:GrayText;--highcontrast-picker-background-color:ButtonFace}#button.is-keyboardFocused,#button:focus-visible{--highcontrast-picker-border-color-hover:ButtonText}#button .label,#button:after{forced-color-adjust:none}}#button{box-sizing:border-box;max-inline-size:100%;min-inline-size:calc(var(--spectrum-picker-minimum-width-multiplier)*var(--mod-picker-block-size,var(--spectrum-picker-block-size)));inline-size:var(--mod-picker-inline-size,var(--spectrum-picker-inline-size));block-size:var(--mod-picker-block-size,var(--spectrum-picker-block-size));border-width:var(--mod-picker-border-width,var(--spectrum-picker-border-width));border-radius:var(--mod-picker-border-radius,var(--spectrum-picker-border-radius));transition:background-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),box-shadow var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration)),border-color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default,var(--spectrum-picker-background-color-default)));border-style:solid;border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-default,var(--spectrum-picker-border-color-default)));margin-block-start:var(--mod-picker-spacing-label-to-picker,var(--spectrum-picker-spacing-label-to-picker));padding-block:0;padding-inline-start:var(--mod-picker-spacing-edge-to-text,var(--spectrum-picker-spacing-edge-to-text));padding-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon,var(--spectrum-picker-spacing-edge-to-disclosure-icon));display:flex}#button:after{pointer-events:none;content:"";block-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);inline-size:calc(100% + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap))*2 + var(--mod-picker-border-width,var(--spectrum-picker-border-width))*2);border-style:solid;border-width:var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness));border-radius:calc(var(--mod-picker-border-radius,var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)));border-color:#0000;margin-block-start:calc((var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);margin-inline-start:calc((var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1);position:absolute;inset-block:0;inset-inline:0}#button:active{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-active,var(--spectrum-picker-background-color-active)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-active,var(--spectrum-picker-border-color-active)))}#button:active:after{border-color:#0000}#button.placeholder:active .label{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}#button.is-keyboardFocused,#button:focus-visible{background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-key-focus,var(--spectrum-picker-background-color-key-focus)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-key-focus,var(--spectrum-picker-border-color-key-focus)));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)));outline:none}#button.is-keyboardFocused:after,#button:focus-visible:after{border-color:var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)))}#button.is-keyboardFocused .label.placeholder,#button:focus-visible .label.placeholder{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-key-focus,var(--spectrum-picker-font-color-key-focus)))}#button.is-keyboardFocused .picker,#button:focus-visible .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-key-focus,var(--spectrum-picker-icon-color-key-focus)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled){color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default-open,var(--spectrum-picker-font-color-default-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-default-open,var(--spectrum-picker-background-color-default-open)));border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-default-open,var(--spectrum-picker-border-color-default-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled) .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default-open,var(--spectrum-picker-icon-color-default-open)))}:host([invalid]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default,var(--spectrum-picker-border-color-error-default)))}:host([invalid]) #button:not(:disabled,.is-disabled) .validation-icon{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-error,var(--spectrum-picker-icon-color-error)))}:host([invalid]) #button:not(:disabled,.is-disabled):active{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-active,var(--spectrum-picker-border-color-error-active)))}:host([invalid][open]) #button:not(:disabled,.is-disabled){border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-default-open,var(--spectrum-picker-border-color-error-default-open)))}:host([invalid]) #button.is-keyboardFocused:not(:disabled,.is-disabled),:host([invalid]) #button:not(:disabled,.is-disabled):focus-visible{border-color:var(--highcontrast-picker-border-color-default,var(--mod-picker-border-color-error-key-focus,var(--spectrum-picker-border-color-error-key-focus)))}:host([pending]) #button .picker{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([invalid]) #button .label,:host([pending]) #button .label{margin-inline-end:var(--mod-picker-spacing-text-to-icon-inline-end,var(--mod-picker-spacing-text-to-alert-icon-inline-start,var(--spectrum-picker-spacing-text-to-icon-inline-end)))}.icon{flex-shrink:0;margin-inline-end:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}.label{white-space:nowrap;font-size:var(--mod-picker-font-size,var(--spectrum-picker-font-size));line-height:var(--mod-picker-line-height,var(--spectrum-picker-line-height));font-weight:var(--mod-picker-font-weight,var(--spectrum-picker-font-weight));text-overflow:ellipsis;text-align:start;flex:auto;padding-block-start:var(--mod-picker-spacing-top-to-text,var(--spectrum-picker-spacing-top-to-text));padding-block-end:calc(var(--mod-picker-spacing-bottom-to-text,var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));overflow:hidden}.label.placeholder{font-weight:var(--mod-picker-placeholder-font-weight,var(--spectrum-picker-font-weight));font-style:var(--mod-picker-placeholder-font-style,var(--spectrum-picker-placeholder-font-style));transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-in-out;color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)))}.label.placeholder:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-active,var(--spectrum-picker-font-color-active)))}.picker{vertical-align:top;transition:color var(--mod-picker-animation-duration,var(--spectrum-picker-animation-duration))ease-out;margin-inline-start:var(--mod-picker-spacing-icon-to-disclosure-icon,var(--spectrum-picker-spacing-icon-to-disclosure-icon));margin-block:var(--mod-picker-spacing-top-to-disclosure-icon,var(--spectrum-picker-spacing-top-to-disclosure-icon));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-default,var(--spectrum-picker-icon-color-default)));flex-shrink:0;display:inline-block;position:relative}.picker:active{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-active,var(--spectrum-picker-icon-color-active)))}.validation-icon{flex-shrink:0;margin-block-start:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-alert-icon,var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}#button .progress-circle{margin-block-start:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)));margin-block-end:calc(var(--mod-picker-spacing-top-to-progress-circle,var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width,var(--spectrum-picker-border-width)))}.label~.picker{margin-inline-start:var(--mod-picker-spacing-text-to-icon,var(--spectrum-picker-spacing-text-to-icon))}:host([quiet]) #button{inline-size:auto;min-inline-size:0;padding-inline:var(--mod-picker-spacing-edge-to-text-quiet,var(--spectrum-picker-spacing-edge-to-text-quiet));color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-default,var(--spectrum-picker-font-color-default)));background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent);border:none;border-radius:0;margin-block-start:calc(var(--mod-picker-spacing-label-to-picker-quiet,var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px)}:host([quiet]) #button.label-inline{margin-block-start:0}:host([quiet]) #button .picker{margin-inline-end:var(--mod-picker-spacing-edge-to-disclosure-icon-quiet,var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet))}:host([quiet]) #button:after{border:none;block-size:auto;inline-size:auto}@media (hover:hover){#button:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover,var(--spectrum-picker-background-color-hover)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover,var(--spectrum-picker-border-color-hover)))}#button:hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover,var(--spectrum-picker-icon-color-hover)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover-open,var(--spectrum-picker-font-color-hover-open)));background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-hover-open,var(--spectrum-picker-background-color-hover-open)));border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-hover-open,var(--spectrum-picker-border-color-hover-open)))}:host([open]) #button:not(.spectrum-Picker--quiet,:disabled,.is-disabled):hover .picker{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-icon-color-hover-open,var(--spectrum-picker-icon-color-hover-open)))}:host([invalid]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover,var(--spectrum-picker-border-color-error-hover)))}:host([invalid][open]) #button:not(:disabled,.is-disabled):hover{border-color:var(--highcontrast-picker-border-color-hover,var(--mod-picker-border-color-error-hover-open,var(--spectrum-picker-border-color-error-hover-open)))}.label.placeholder:hover{color:var(--highcontrast-picker-content-color-default,var(--mod-picker-font-color-hover,var(--spectrum-picker-font-color-hover)))}:host([quiet]) #button:hover{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}}:host([quiet]) #button.is-keyboardFocused,:host([quiet]) #button:focus-visible{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}:host([quiet]) #button.is-keyboardFocused:after,:host([quiet]) #button:focus-visible:after{box-shadow:0 var(--mod-picker-focus-indicator-thickness,var(--spectrum-picker-focus-indicator-thickness))0 0 var(--highcontrast-picker-focus-indicator-color,var(--mod-picker-focus-indicator-color,var(--spectrum-picker-focus-indicator-color)));margin:calc((var(--mod-picker-focus-indicator-gap,var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width,var(--spectrum-picker-border-width)))*-1)0;border:none;border-radius:0}:host([quiet][open]) #button,:host([quiet][disabled]) #button#button,:host([quiet]) #button#button:disabled,:host([quiet]) #button:active{background-color:initial;background-color:var(--highcontrast-picker-background-color,transparent)}.label-inline{vertical-align:top;display:inline-flex}:host([disabled]) #button,#button:disabled{cursor:default;background-color:var(--highcontrast-picker-background-color,var(--mod-picker-background-color-disabled,var(--spectrum-picker-background-color-disabled)));border-color:var(--highcontrast-picker-border-color-disabled,var(--spectrum-picker-border-color-disabled));color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}:host([disabled]) #button .icon,:host([disabled]) #button .picker,:host([disabled]) #button .validation-icon,#button:disabled .icon,#button:disabled .picker,#button:disabled .validation-icon{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-icon-color-disabled,var(--spectrum-picker-icon-color-disabled)))}:host([disabled]) #button .label.placeholder,#button:disabled .label.placeholder{color:var(--highcontrast-picker-content-color-disabled,var(--mod-picker-font-color-disabled,var(--spectrum-picker-font-color-disabled)))}
`;
export default styles;
//# sourceMappingURL=spectrum-picker.css.dev.js.map