.wb-field-label { cursor: pointer; color: var(--wb-ds-field-label__color, var(--wb-ds-field__color)); font-family: var(--wb-ds-field-label__font-family, var(--wb-ds-field__font-family)); font-size: var(--wb-ds-field-label__font-size, var(--wb-ds-field__font-size)); font-style: var(--wb-ds-field-label__font-style, var(--wb-ds-field__font-style)); font-weight: var(--wb-ds-field-label__font-weight, var(--wb-ds-field__font-weight)); line-height: var(--wb-ds-field-label__line-height, var(--wb-ds-field__line-height)); letter-spacing: var(--wb-ds-field-label__letter-spacing, var(--wb-ds-field__letter-spacing)); text-transform: var(--wb-ds-field-label__text-transform, var(--wb-ds-field__text-transform)); text-align: var(--wb-ds-field-label__text-align, var(--wb-ds-field__text-align)); opacity: var(--wb-ds-field-label__opacity, var(--wb-ds-field__opacity)); } .wb-field-label--required:after { margin-left: var(--wb-ds-field-label-marker__space-row, var(--wb-ds-space--2xs, 2px)); content: var(--wb-ds-field-label-marker__symbol, "*"); color: var(--wb-ds-field-label-marker__color, var(--wb-ds-field-label__color)); } .wb-field-label:not(.wb-field-label--required):after { margin-left: var(--wb-ds-field-label-marker-optional__space-row, var(--wb-ds-space--2xs, 2px)); content: var(--wb-ds-field-label-marker-optional__symbol, initial); color: var(--wb-ds-field-label-marker-optional__color, var(--wb-ds-field-label__color)); } .wb-field-label.interacted.valid, .wb-field-label.interacted:valid, .wb-field-label:--interacted:valid { --wb-ds-field-label__opacity: var(--wb-ds-field-label__opacity--valid); --wb-ds-field-label__font-weight: var(--wb-ds-field-label__font-weight--valid); --wb-ds-field-label__font-style: var(--wb-ds-field-label__font-style--valid); --wb-ds-field-label__color: var(--wb-ds-field-label__color--valid); } .wb-field-label.interacted.invalid, .wb-field-label.interacted:invalid, .wb-field-label:--interacted:invalid { --wb-ds-field-label__opacity: var(--wb-ds-field-label__opacity--invalid); --wb-ds-field-label__font-weight: var(--wb-ds-field-label__font-weight--invalid); --wb-ds-field-label__font-style: var(--wb-ds-field-label__font-style--invalid); --wb-ds-field-label__color: var(--wb-ds-field-label__color--invalid); } .wb-field-label--disabled { cursor: not-allowed; --wb-ds-field-label__opacity: var(--wb-ds-field-label__opacity--disabled); --wb-ds-field-label__font-weight: var(--wb-ds-field-label__font-weight--disabled); --wb-ds-field-label__font-style: var(--wb-ds-field-label__font-style--disabled); --wb-ds-field-label__color: var(--wb-ds-field-label__color--disabled, var(--wb-ds-color-text--disabled)); } .wb-field-label--loading { cursor: wait; } .wb-field-message { color: var(--wb-ds-field-message__color--type, var(--wb-ds-field-message__color, var(--wb-ds-field__color))); font-family: var(--wb-ds-field-message__font-family--type, var(--wb-ds-field-message__font-family, var(--wb-ds-field__font-family))); font-size: var(--wb-ds-field-message__font-size--type, var(--wb-ds-field-message__font-size, var(--wb-ds-field__font-size, var(--wb-ds-font-size--default)))); font-style: var(--wb-ds-field-message__font-style--type, var(--wb-ds-field-message__font-style, var(--wb-ds-field__font-style))); font-weight: var(--wb-ds-field-message__font-weight--type, var(--wb-ds-field-message__font-weight, var(--wb-ds-field__font-weight))); line-height: var(--wb-ds-field-message__line-height--type, var(--wb-ds-field-message__line-height, var(--wb-ds-field__line-height, var(--wb-ds-line-height--default)))); letter-spacing: var(--wb-ds-field-message__letter-spacing--type, var(--wb-ds-field-message__letter-spacing, var(--wb-ds-field__letter-spacing))); text-transform: var(--wb-ds-field-message__text-transform--type, var(--wb-ds-field-message__text-transform, var(--wb-ds-field__text-transform))); text-align: var(--wb-ds-field-message__text-align--type, var(--wb-ds-field-message__text-align, var(--wb-ds-field__text-align))); opacity: var(--wb-ds-field-message__opacity--type, var(--wb-ds-field-message__opacity, var(--wb-ds-field__opacity))); padding-top: var(--wb-ds-field-message__bezel-top--type, var(--wb-ds-field-message__bezel--type, var(--wb-ds-field-message__bezel-top))); padding-right: var(--wb-ds-field-message__bezel-right--type, var(--wb-ds-field-message__bezel--type, var(--wb-ds-field-message__bezel-right))); padding-bottom: var(--wb-ds-field-message__bezel-bottom--type, var(--wb-ds-field-message__bezel--type, var(--wb-ds-field-message__bezel-bottom))); padding-left: var(--wb-ds-field-message__bezel-left--type, var(--wb-ds-field-message__bezel--type, var(--wb-ds-field-message__bezel-left))); --wb-ds-field-message__box-shadow--value: var(--wb-ds-field-message__box-shadow--type, var(--wb-ds-field-message__box-shadow)); --wb-ds-field-message__border-width--value: var(--wb-ds-field-message__border-width--type, var(--wb-ds-field-message__border-width)); --wb-ds-field-message__border-color--value: var(--wb-ds-field-message__border-color--type, var(--wb-ds-field-message__border-color)); --wb-ds-field-message__blur-radius--value: var(--wb-ds-field-message__blur-radius--type, var(--wb-ds-field-message__blur-radius)); --wb-ds-field-message__spread-radius--value: var(--wb-ds-field-message__spread-radius--type, var(--wb-ds-field-message__spread-radius)); --wb-ds-field-message__box-shadow-top--value: var(--wb-ds-field-message__box-shadow-top, inset 0px var(--wb-ds-field-message__border-width--value) var(--wb-ds-field-message__blur-radius--value) var(--wb-ds-field-message__spread-radius--value) var(--wb-ds-field-message__border-color--value)); --wb-ds-field-message__box-shadow-right--value: var(--wb-ds-field-message__box-shadow-right, inset calc(var(--wb-ds-field-message__border-width--value) * -1) 0px var(--wb-ds-field-message__blur-radius--value) var(--wb-ds-field-message__spread-radius--value) var(--wb-ds-field-message__border-color--value)); --wb-ds-field-message__box-shadow-bottom--value: var(--wb-ds-field-message__box-shadow-bottom, inset 0px calc(var(--wb-ds-field-message__border-width--value) * -1) var(--wb-ds-field-message__blur-radius--value) var(--wb-ds-field-message__spread-radius--value) var(--wb-ds-field-message__border-color--value)); --wb-ds-field-message__box-shadow-left--value: var(--wb-ds-field-message__box-shadow-left, inset var(--wb-ds-field-message__border-width--value) 0px var(--wb-ds-field-message__blur-radius--value) var(--wb-ds-field-message__spread-radius--value) var(--wb-ds-field-message__border-color--value)); box-shadow: var(--wb-ds-field-message__box-shadow--value, var(--wb-ds-field-message__box-shadow-left--value), var(--wb-ds-field-message__box-shadow-right--value), var(--wb-ds-field-message__box-shadow-top--value), var(--wb-ds-field-message__box-shadow-bottom--value)); border-top: var(--wb-ds-field-message__border-top--type, var(--wb-ds-field-message__border--type, var(--wb-ds-field-message__border-top))); border-right: var(--wb-ds-field-message__border-right--type, var(--wb-ds-field-message__border--type, var(--wb-ds-field-message__border-right))); border-bottom: var(--wb-ds-field-message__border-bottom--type, var(--wb-ds-field-message__border--type, var(--wb-ds-field-message__border-bottom))); border-left: var(--wb-ds-field-message__border-left--type, var(--wb-ds-field-message__border--type, var(--wb-ds-field-message__border-left))); border-radius: var(--wb-ds-field-message__border-radius--type, var(--wb-ds-field-message__border-radius)); outline: var(--wb-ds-field-message__outline--type, var(--wb-ds-field-message__outline)); transition: var(--wb-ds-field-message__transition--type, var(--wb-ds-field-message__transition)); background: var(--wb-ds-field-message__background--type, var(--wb-ds-field-message__background)); } .wb-field-message * { --wb-ds-field-message__bezel: initial; --wb-ds-field-message__bezel-top: initial; --wb-ds-field-message__bezel-right: initial; --wb-ds-field-message__bezel-bottom: initial; --wb-ds-field-message__bezel-left: initial; } .wb-field-message * { --wb-ds-field-message__border-color: initial; --wb-ds-field-message__border-radius: initial; --wb-ds-field-message__border-width: initial; --wb-ds-field-message__box-shadow: initial; --wb-ds-field-message__box-shadow-top: initial; --wb-ds-field-message__box-shadow-right: initial; --wb-ds-field-message__box-shadow-bottom: initial; --wb-ds-field-message__box-shadow-left: initial; --wb-ds-field-message__border: initial; --wb-ds-field-message__border-top: initial; --wb-ds-field-message__border-right: initial; --wb-ds-field-message__border-bottom: initial; --wb-ds-field-message__border-left: initial; --wb-ds-field-message__outline: initial; --wb-ds-field-message__transition: initial; } .wb-field-message * { --wb-ds-field-message__background: initial; } .wb-field-message--help { --wb-ds-field-message__opacity--type: var(--wb-ds-field-message-is-help__opacity); --wb-ds-field-message__text-align--type: var(--wb-ds-field-message-is-help__text-align); --wb-ds-field-message__text-transform--type: var(--wb-ds-field-message-is-help__text-transform); --wb-ds-field-message__letter-spacing--type: var(--wb-ds-field-message-is-help__letter-spacing); --wb-ds-field-message__line-height--type: var(--wb-ds-field-message-is-help__line-height); --wb-ds-field-message__font-weight--type: var(--wb-ds-field-message-is-help__font-weight); --wb-ds-field-message__font-style--type: var(--wb-ds-field-message-is-help__font-style); --wb-ds-field-message__font-size--type: var(--wb-ds-field-message-is-help__font-size); --wb-ds-field-message__font-family--type: var(--wb-ds-field-message-is-help__font-family); --wb-ds-field-message__color--type: var(--wb-ds-field-message-is-help__color); --wb-ds-field-message__bezel--type: var(--wb-ds-field-message-is-help__bezel); --wb-ds-field-message__bezel-bottom--type: var(--wb-ds-field-message-is-help__bezel-bottom); --wb-ds-field-message__bezel-top--type: var(--wb-ds-field-message-is-help__bezel-top); --wb-ds-field-message__bezel-right--type: var(--wb-ds-field-message-is-help__bezel-right); --wb-ds-field-message__bezel-left--type: var(--wb-ds-field-message-is-help__bezel-left); --wb-ds-field-message__border--type: var(--wb-ds-field-message-is-help__border); --wb-ds-field-message__outline--type: var(--wb-ds-field-message-is-help__outline); --wb-ds-field-message__box-shadow--type: var(--wb-ds-field-message-is-help__box-shadow); --wb-ds-field-message__border-radius--type: var(--wb-ds-field-message-is-help__border-radius); --wb-ds-field-message__border-left--type: var(--wb-ds-field-message-is-help__border-left); --wb-ds-field-message__border-bottom--type: var(--wb-ds-field-message-is-help__border-bottom); --wb-ds-field-message__border-right--type: var(--wb-ds-field-message-is-help__border-right); --wb-ds-field-message__border-top--type: var(--wb-ds-field-message-is-help__border-top); --wb-ds-field-message__background--type: var(--wb-ds-field-message-is-help__background); } .wb-field-message--error { --wb-ds-field-message__opacity--type: var(--wb-ds-field-message-is-error__opacity); --wb-ds-field-message__text-align--type: var(--wb-ds-field-message-is-error__text-align); --wb-ds-field-message__text-transform--type: var(--wb-ds-field-message-is-error__text-transform); --wb-ds-field-message__letter-spacing--type: var(--wb-ds-field-message-is-error__letter-spacing); --wb-ds-field-message__line-height--type: var(--wb-ds-field-message-is-error__line-height); --wb-ds-field-message__font-weight--type: var(--wb-ds-field-message-is-error__font-weight); --wb-ds-field-message__font-style--type: var(--wb-ds-field-message-is-error__font-style); --wb-ds-field-message__font-size--type: var(--wb-ds-field-message-is-error__font-size); --wb-ds-field-message__font-family--type: var(--wb-ds-field-message-is-error__font-family); --wb-ds-field-message__color--type: var(--wb-ds-field-message-is-error__color, var(--wb-ds-field__color--invalid, var(--wb-ds-color-error--default))); --wb-ds-field-message__bezel--type: var(--wb-ds-field-message-is-error__bezel); --wb-ds-field-message__bezel-bottom--type: var(--wb-ds-field-message-is-error__bezel-bottom); --wb-ds-field-message__bezel-top--type: var(--wb-ds-field-message-is-error__bezel-top); --wb-ds-field-message__bezel-right--type: var(--wb-ds-field-message-is-error__bezel-right); --wb-ds-field-message__bezel-left--type: var(--wb-ds-field-message-is-error__bezel-left); --wb-ds-field-message__border--type: var(--wb-ds-field-message-is-error__border); --wb-ds-field-message__outline--type: var(--wb-ds-field-message-is-error__outline); --wb-ds-field-message__box-shadow--type: var(--wb-ds-field-message-is-error__box-shadow); --wb-ds-field-message__border-radius--type: var(--wb-ds-field-message-is-error__border-radius); --wb-ds-field-message__border-left--type: var(--wb-ds-field-message-is-error__border-left); --wb-ds-field-message__border-bottom--type: var(--wb-ds-field-message-is-error__border-bottom); --wb-ds-field-message__border-right--type: var(--wb-ds-field-message-is-error__border-right); --wb-ds-field-message__border-top--type: var(--wb-ds-field-message-is-error__border-top); --wb-ds-field-message__background--type: var(--wb-ds-field-message-is-error__background); } .wb-field-message__icon { display: var(--wb-ds-field-message-icon__display, var(--wb-ds-field-message-icon__display, inline-block)); --wb-icon__fill--override: var(--wb-ds-field-message-icon__fill--type, var(--wb-ds-field-message-icon__fill)); } .wb-field-message__icon--help { --wb-ds-field-message-icon__fill--type: var(--wb-ds-field-message-icon__fill--help); } .wb-field-message__icon--error { --wb-ds-field-message-icon__fill--type: var( --wb-ds-field-message-icon__fill--error, var(--wb-ds-color-error--default) ); } .wb-field-label--fluid { padding-top: var(--wb-dropdown-field-label-is-fluid__bezel-top, var(--wb-dropdown-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); padding-right: var(--wb-dropdown-field-label-is-fluid__bezel-right, var(--wb-dropdown-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); padding-bottom: var(--wb-dropdown-field-label-is-fluid__bezel-bottom, var(--wb-dropdown-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); padding-left: var(--wb-dropdown-field-label-is-fluid__bezel-left, var(--wb-dropdown-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); --wb-ds-field-label__opacity--type: var(--wb-ds-field-label-is-fluid__opacity); --wb-ds-field-label__text-align--type: var(--wb-ds-field-label-is-fluid__text-align); --wb-ds-field-label__text-transform--type: var(--wb-ds-field-label-is-fluid__text-transform); --wb-ds-field-label__letter-spacing--type: var(--wb-ds-field-label-is-fluid__letter-spacing); --wb-ds-field-label__line-height--type: var(--wb-ds-field-label-is-fluid__line-height); --wb-ds-field-label__font-weight--type: var(--wb-ds-field-label-is-fluid__font-weight); --wb-ds-field-label__font-style--type: var(--wb-ds-field-label-is-fluid__font-style); --wb-ds-field-label__font-size--type: var(--wb-ds-field-label-is-fluid__font-size); --wb-ds-field-label__font-family--type: var(--wb-ds-field-label-is-fluid__font-family); --wb-ds-field-label__color--type: var(--wb-ds-field-label-is-fluid__color); z-index: 1; pointer-events: none; max-width: none; position: absolute; transform-origin: top left; transform: translate(var(--wb-text-field__bezel-left--value, var(--wb-ds-field__bezel-left--value, var(--wb-ds-space--s, 1rem))), 0) scale(1); padding-left: 0; padding-right: 0; opacity: 1; transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; } .wb-field-label--fluid * { --wb-dropdown-field-label-is-fluid__bezel: initial; --wb-dropdown-field-label-is-fluid__bezel-top: initial; --wb-dropdown-field-label-is-fluid__bezel-right: initial; --wb-dropdown-field-label-is-fluid__bezel-bottom: initial; --wb-dropdown-field-label-is-fluid__bezel-left: initial; } .wb-field-label--fluid::before { position: absolute; content: ""; --wb-dropdown-field-label-is-fluid__mask-top--value: var(--wb-dropdown-field-label-is-fluid__mask-top, calc(var(--wb-ds-line-height--default) / 2)); --wb-dropdown-field-label-is-fluid__mask-bottom--value: var(--wb-dropdown-field-label-is-fluid__mask-bottom, calc(var(--wb-ds-line-height--default) / 2)); top: calc(50% - var(--wb-dropdown-field-label-is-fluid__mask-top--value)); bottom: calc(50% - (var(--wb-dropdown-field-label-is-fluid__mask-bottom--value))); left: calc(-1 * var(--wb-dropdown-field-label-is-fluid__mask-left, var(--wb-ds-space--xs, 1px))); right: calc(-1 * var(--wb-dropdown-field-label-is-fluid__mask-right, var(--wb-ds-space--xs, 1px))); z-index: -1; background: transparent; } :focus-within .wb-field-label--fluid, :host(.not-empty) .wb-field-label--fluid { --wb-dropdown-field-label-is-fluid__mask-scale--value: var(--wb-dropdown-field-label-is-fluid__mask-scale, 0.75); --wb-dropdown-field-label-is-fluid__mask-translate-x--value: var(--wb-dropdown-field-label-is-fluid__mask-translate-x, var(--wb-dropdown-field-label-is-fluid__bezel-left, var(--wb-ds-field-label-is-fluid__bezel-left, var(--wb-ds-space--s, 1rem)))); --wb-dropdown-field-label-is-fluid__mask-translate-y--value: var(--wb-dropdown-field-label-is-fluid__mask-translate-y, calc(-100% * var(--wb-dropdown-field-label-is-fluid__mask-scale--value) / 2)); transform: translate(var(--wb-dropdown-field-label-is-fluid__mask-translate-x--value), var(--wb-dropdown-field-label-is-fluid__mask-translate-y--value)) scale(var(--wb-dropdown-field-label-is-fluid__mask-scale--value)); } :focus-within .wb-field-label--fluid::before, :host(.not-empty) .wb-field-label--fluid::before { background: var(--wb-dropdown-field-label-is-fluid__mask-color, var(--wb-ds-field__background, var(--wb-ds-color-background--default))); } :host { width: 100%; --wb-icon__fill--override: var( --wb-dropdown-field-icon__fill--state, var( --wb-dropdown-field-icon__fill--override, var(--wb-dropdown-field-icon__fill, var(--wb-ds-field__color, currentcolor)) ) ); --wb-icon__size--override: var(--wb-dropdown-field-icon__size--override, var(--wb-dropdown-field-icon__size)); } :host([disabled]) { --wb-dropdown-field-icon__fill--state: var(--wb-dropdown-field-icon__fill--disabled); } .wb-dropdown__select-wrapper { position: relative; display: inline-block; } .wb-dropdown__icon-wrapper { position: absolute; top: 0; right: 0; left: 0; bottom: 0; pointer-events: none; display: flex; justify-content: var(--wb-dropdown-field-icon__justify-content, flex-end); padding-left: var(--wb-dropdown-field-icon__bezel-left--override, var(--wb-dropdown-field-icon__bezel--override, var(--wb-dropdown-field-icon__bezel-left, var(--wb-dropdown-field-icon__bezel, var(--wb-ds-field__bezel-left, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))))); padding-right: var(--wb-dropdown-field-icon__bezel-right--override, var(--wb-dropdown-field-icon__bezel--override, var(--wb-dropdown-field-icon__bezel-right, var(--wb-dropdown-field-icon__bezel, var(--wb-ds-field__bezel-right, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))))); } .wb-dropdown__icon-wrapper * { --wb-dropdown-field-icon__bezel: initial; --wb-dropdown-field-icon__bezel-left: initial; --wb-dropdown-field-icon__bezel-right: initial; } .wb-dropdown__icon { align-self: var(--wb-dropdown-field-icon__align-self, center); transition: var(--wb-dropdown-field-icon__transition, transform var(--wb-dropdown-field-icon__transition-duration, var(--wb-ds-animation-duration--default, 0.25s)) var(--wb-dropdown-field-icon__timing-function, var(--wb-ds-animation-timing-function, ease))); } .wb-dropdown { position: relative; max-width: 100%; user-select: none; -moz-user-select: none; -webkit-user-select: none; } .wb-dropdown[disabled] { opacity: var(--wb-dropdown-field__opacity--disabled, 0.4); pointer-events: none; } .wb-dropdown__select { color: var(--wb-dropdown-field__color, var(--wb-ds-field__color)); font-family: var(--wb-dropdown-field__font-family, var(--wb-ds-field__font-family)); font-size: var(--wb-dropdown-field__font-size, var(--wb-ds-field__font-size)); font-style: var(--wb-dropdown-field__font-style, var(--wb-ds-field__font-style)); font-weight: var(--wb-dropdown-field__font-weight, var(--wb-ds-field__font-weight)); line-height: var(--wb-dropdown-field__line-height, var(--wb-ds-field__line-height)); letter-spacing: var(--wb-dropdown-field__letter-spacing, var(--wb-ds-field__letter-spacing)); text-transform: var(--wb-dropdown-field__text-transform, var(--wb-ds-field__text-transform)); text-align: var(--wb-dropdown-field__text-align, var(--wb-ds-field__text-align)); opacity: var(--wb-dropdown-field__opacity, var(--wb-ds-field__opacity)); padding-top: var(--wb-dropdown-field__bezel-top, var(--wb-dropdown-field__bezel, var(--wb-ds-field__bezel-top, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))); padding-right: var(--wb-dropdown-field__bezel-right, var(--wb-dropdown-field__bezel, var(--wb-ds-field__bezel-right, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))); padding-bottom: var(--wb-dropdown-field__bezel-bottom, var(--wb-dropdown-field__bezel, var(--wb-ds-field__bezel-bottom, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))); padding-left: var(--wb-dropdown-field__bezel-left, var(--wb-dropdown-field__bezel, var(--wb-ds-field__bezel-left, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))); --wb-ds-field__box-shadow--value: var(--wb-ds-field__box-shadow, var(--wb-ds-border-is-box-shadow)); --wb-ds-field__border-width--value: var(--wb-ds-field__border-width, var(--wb-ds-border-width--default)); --wb-ds-field__border-color--value: var(--wb-ds-field__border-color, var(--wb-ds-color-border--default)); --wb-ds-field__blur-radius--value: var(--wb-ds-field__blur-radius, var(--wb-ds-border-blur-radius--default, 0)); --wb-ds-field__spread-radius--value: var(--wb-ds-field__spread-radius, var(--wb-ds-border-spread-radius--default, 0)); --wb-dropdown-field__box-shadow--value: var(--wb-dropdown-field__box-shadow, var(--wb-ds-field__box-shadow--value)); --wb-dropdown-field__border-width--value: var(--wb-dropdown-field__border-width, var(--wb-ds-field__border-width--value)); --wb-dropdown-field__border-color--value: var(--wb-dropdown-field__border-color, var(--wb-ds-field__border-color--value)); --wb-dropdown-field__blur-radius--value: var(--wb-dropdown-field__blur-radius, var(--wb-ds-field__blur-radius--value)); --wb-dropdown-field__spread-radius--value: var(--wb-dropdown-field__spread-radius, var(--wb-ds-field__spread-radius--value)); --wb-dropdown-field__box-shadow-top--value: var(--wb-dropdown-field__box-shadow-top, inset 0px var(--wb-dropdown-field__border-width--value) var(--wb-dropdown-field__blur-radius--value) var(--wb-dropdown-field__spread-radius--value) var(--wb-dropdown-field__border-color--value)); --wb-dropdown-field__box-shadow-right--value: var(--wb-dropdown-field__box-shadow-right, inset calc(var(--wb-dropdown-field__border-width--value) * -1) 0px var(--wb-dropdown-field__blur-radius--value) var(--wb-dropdown-field__spread-radius--value) var(--wb-dropdown-field__border-color--value)); --wb-dropdown-field__box-shadow-bottom--value: var(--wb-dropdown-field__box-shadow-bottom, inset 0px calc(var(--wb-dropdown-field__border-width--value) * -1) var(--wb-dropdown-field__blur-radius--value) var(--wb-dropdown-field__spread-radius--value) var(--wb-dropdown-field__border-color--value)); --wb-dropdown-field__box-shadow-left--value: var(--wb-dropdown-field__box-shadow-left, inset var(--wb-dropdown-field__border-width--value) 0px var(--wb-dropdown-field__blur-radius--value) var(--wb-dropdown-field__spread-radius--value) var(--wb-dropdown-field__border-color--value)); box-shadow: var(--wb-dropdown-field__box-shadow--value, var(--wb-dropdown-field__box-shadow-left--value), var(--wb-dropdown-field__box-shadow-right--value), var(--wb-dropdown-field__box-shadow-top--value), var(--wb-dropdown-field__box-shadow-bottom--value)); border-top: var(--wb-dropdown-field__border-top, var(--wb-dropdown-field__border, var(--wb-ds-field__border-top, var(--wb-ds-border-is-border)))); border-right: var(--wb-dropdown-field__border-right, var(--wb-dropdown-field__border, var(--wb-ds-field__border-right, var(--wb-ds-border-is-border)))); border-bottom: var(--wb-dropdown-field__border-bottom, var(--wb-dropdown-field__border, var(--wb-ds-field__border-bottom, var(--wb-ds-border-is-border)))); border-left: var(--wb-dropdown-field__border-left, var(--wb-dropdown-field__border, var(--wb-ds-field__border-left, var(--wb-ds-border-is-border)))); border-radius: var(--wb-dropdown-field__border-radius, var(--wb-ds-field__border-radius, var(--wb-ds-border-radius--default))); outline: var(--wb-dropdown-field__outline, var(--wb-ds-field__outline, var(--wb-ds-border-is-outline))); transition: var(--wb-dropdown-field__transition, var(--wb-ds-field__transition)); background: var(--wb-dropdown-field__background, var(--wb-ds-field__background, var(--wb-ds-color-background--default, initial))); text-decoration: var(--wb-dropdown-field__text-decoration, var(--wb-ds-field__text-decoration)); cursor: var(--wb-dropdown-field__cursor, text); box-sizing: border-box; resize: none; width: 100%; appearance: var(--wb-dropdown-field__appearance, none); -webkit-appearance: var(--wb-dropdown-field__appearance, none); -moz-appearance: var(--wb-dropdown-field__appearance, none); height: var(--wb-dropdown-field__input-height); } .wb-dropdown__select * { --wb-dropdown-field__bezel: initial; --wb-dropdown-field__bezel-top: initial; --wb-dropdown-field__bezel-right: initial; --wb-dropdown-field__bezel-bottom: initial; --wb-dropdown-field__bezel-left: initial; } .wb-dropdown__select * { --wb-dropdown-field__border-color: initial; --wb-dropdown-field__border-radius: initial; --wb-dropdown-field__border-width: initial; --wb-dropdown-field__box-shadow: initial; --wb-dropdown-field__box-shadow-top: initial; --wb-dropdown-field__box-shadow-right: initial; --wb-dropdown-field__box-shadow-bottom: initial; --wb-dropdown-field__box-shadow-left: initial; --wb-dropdown-field__border: initial; --wb-dropdown-field__border-top: initial; --wb-dropdown-field__border-right: initial; --wb-dropdown-field__border-bottom: initial; --wb-dropdown-field__border-left: initial; --wb-dropdown-field__outline: initial; --wb-dropdown-field__transition: initial; } .wb-dropdown__select * { --wb-dropdown-field__background: initial; } .wb-dropdown__select.interacted.valid, .wb-dropdown__select.interacted:valid, .wb-dropdown__select:--interacted:valid { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--valid); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--valid); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--valid); --wb-dropdown-field__color: var(--wb-ds-field__color--valid); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--valid); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--valid); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--valid); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--valid); --wb-dropdown-field__border: var(--wb-ds-field__border--valid); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--valid); --wb-dropdown-field__transition: var(--wb-ds-field__transition--valid); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--valid); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--valid); --wb-dropdown-field__background: var(--wb-ds-field__background--valid); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--valid); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--valid); } .wb-dropdown__select.interacted.invalid, .wb-dropdown__select.interacted:invalid, .wb-dropdown__select:--interacted:invalid { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--invalid); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--invalid); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--invalid); --wb-dropdown-field__color: var(--wb-ds-field__color--invalid); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--invalid); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--invalid); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--invalid); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--invalid); --wb-dropdown-field__border: var(--wb-ds-field__border--invalid); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--invalid); --wb-dropdown-field__transition: var(--wb-ds-field__transition--invalid); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--invalid); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--invalid); --wb-dropdown-field__background: var(--wb-ds-field__background--invalid); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--invalid); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--invalid); } .wb-dropdown__select:hover, .wb-dropdown__select.interacted:hover { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--hover); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--hover); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--hover); --wb-dropdown-field__color: var(--wb-ds-field__color--hover); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--hover); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--hover); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--hover); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--hover); --wb-dropdown-field__border: var(--wb-ds-field__border--hover); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--hover); --wb-dropdown-field__transition: var(--wb-ds-field__transition--hover); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--hover); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--hover); --wb-dropdown-field__background: var(--wb-ds-field__background--hover); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--hover); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--hover); } .wb-dropdown__select:focus, .wb-dropdown__select.interacted:focus { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--focus); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--focus); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--focus); --wb-dropdown-field__color: var(--wb-ds-field__color--focus); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--focus); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--focus); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--focus); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--focus); --wb-dropdown-field__border: var(--wb-ds-field__border--focus); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--focus); --wb-dropdown-field__transition: var(--wb-ds-field__transition--focus); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--focus); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--focus); --wb-dropdown-field__background: var(--wb-ds-field__background--focus); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--focus); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--focus); } .wb-dropdown__select:active, .wb-dropdown__select.interacted:active { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--active); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--active); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--active); --wb-dropdown-field__color: var(--wb-ds-field__color--active); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--active); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--active); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--active); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--active); --wb-dropdown-field__border: var(--wb-ds-field__border--active); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--active); --wb-dropdown-field__transition: var(--wb-ds-field__transition--active); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--active); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--active); --wb-dropdown-field__background: var(--wb-ds-field__background--active); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--active); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--active); } .wb-dropdown__select:disabled, .wb-dropdown__select.interacted:disabled { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--disabled); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--disabled); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--disabled); --wb-dropdown-field__color: var(--wb-ds-field__color--disabled); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--disabled); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--disabled); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--disabled); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--disabled); --wb-dropdown-field__border: var(--wb-ds-field__border--disabled); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--disabled); --wb-dropdown-field__transition: var(--wb-ds-field__transition--disabled); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--disabled); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--disabled); --wb-dropdown-field__background: var(--wb-ds-field__background--disabled); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--disabled, not-allowed); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--disabled); opacity: var(--wb-dropdown-field__opacity, var(--wb-ds-field__opacity--disabled, 0.7)); } .wb-dropdown__select :-webkit-autofill, .wb-dropdown__select:-webkit-autofill { -webkit-text-fill-color: var(--wb-dropdown-field__color, var(--wb-ds-field__color)); } .wb-dropdown__select :-webkit-autofill:hover, .wb-dropdown__select:-webkit-autofill:hover { -webkit-text-fill-color: var(--wb-dropdown-field__color, var(--wb-ds-field__color--hover)); } .wb-dropdown__select :-webkit-autofill:focus, .wb-dropdown__select:-webkit-autofill:focus { -webkit-text-fill-color: var(--wb-dropdown-field__color, var(--wb-ds-field__color--focus)); } .wb-dropdown__select:checked, .wb-dropdown__select.interacted:checked { --wb-dropdown-field__opacity: var(--wb-ds-field__opacity--valid); --wb-dropdown-field__font-weight: var(--wb-ds-field__font-weight--valid); --wb-dropdown-field__font-style: var(--wb-ds-field__font-style--valid); --wb-dropdown-field__color: var(--wb-ds-field__color--valid); --wb-dropdown-field__border-left: var(--wb-ds-field__border-left--valid); --wb-dropdown-field__border-bottom: var(--wb-ds-field__border-bottom--valid); --wb-dropdown-field__border-right: var(--wb-ds-field__border-right--valid); --wb-dropdown-field__border-top: var(--wb-ds-field__border-top--valid); --wb-dropdown-field__border: var(--wb-ds-field__border--valid); --wb-dropdown-field__box-shadow: var(--wb-ds-field__box-shadow--valid); --wb-dropdown-field__transition: var(--wb-ds-field__transition--valid); --wb-dropdown-field__border-width: var(--wb-ds-field__border-width--valid); --wb-dropdown-field__border-color: var(--wb-ds-field__border-color--valid); --wb-dropdown-field__background: var(--wb-ds-field__background--valid); --wb-dropdown-field__cursor: var(--wb-ds-field__cursor--valid); --wb-dropdown-field__text-decoration: var(--wb-ds-field__text-decoration--valid); } @media (min-width: 430px) { .wb-dropdown__select { max-width: 100%; } } .placeholder { color: var(--wb-dropdown-field-placeholder__color, var(--wb-ds-field-placeholder__color, var(--wb-ds-field__color, var(--wb-ds-color-text--default)))); font-family: var(--wb-dropdown-field-placeholder__font-family, var(--wb-ds-field-placeholder__font-family, var(--wb-ds-field__font-family))); font-size: var(--wb-dropdown-field-placeholder__font-size, var(--wb-ds-field-placeholder__font-size, var(--wb-ds-field__font-size))); font-style: var(--wb-dropdown-field-placeholder__font-style, var(--wb-ds-field-placeholder__font-style, var(--wb-ds-field__font-style))); font-weight: var(--wb-dropdown-field-placeholder__font-weight, var(--wb-ds-field-placeholder__font-weight, var(--wb-ds-field__font-weight))); line-height: var(--wb-dropdown-field-placeholder__line-height, var(--wb-ds-field-placeholder__line-height, var(--wb-ds-field__line-height))); letter-spacing: var(--wb-dropdown-field-placeholder__letter-spacing, var(--wb-ds-field-placeholder__letter-spacing, var(--wb-ds-field__letter-spacing))); text-transform: var(--wb-dropdown-field-placeholder__text-transform, var(--wb-ds-field-placeholder__text-transform, var(--wb-ds-field__text-transform))); text-align: var(--wb-dropdown-field-placeholder__text-align, var(--wb-ds-field-placeholder__text-align, var(--wb-ds-field__text-align))); opacity: var(--wb-dropdown-field-placeholder__opacity, var(--wb-ds-field-placeholder__opacity, var(--wb-ds-field__opacity))); } .wb-dropdown__select:disabled { --wb-dropdown-field-placeholder__color: var( --wb-dropdown-field-placeholder__color--disabled, var( --wb-ds-field-placeholder__color--disabled, var(--wb-ds-field__color--disabled, var(--wb-ds-color-text--disabled)) ) ); --wb-dropdown-field-placeholder__opacity: var( --wb-dropdown-field-placeholder__opacity--disabled, var(--wb-ds-field-placeholder__opacity--disabled, 0.7) ); } .wb-dropdown__fluid-option:after { margin-left: var(--wb-dropdown-field-label-marker__space-row, var(--wb-ds-field-label-marker__space-row)); content: var(--wb-ds-field-label-marker__symbol, initial); color: var(--wb-ds-field-label-marker__color, inherit); }

AltStyle によって変換されたページ (->オリジナル) /