.wb-field-label--fluid { padding-top: var(--wb-upload-field-label-is-fluid__bezel-top, var(--wb-upload-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); padding-right: var(--wb-upload-field-label-is-fluid__bezel-right, var(--wb-upload-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); padding-bottom: var(--wb-upload-field-label-is-fluid__bezel-bottom, var(--wb-upload-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem))); padding-left: var(--wb-upload-field-label-is-fluid__bezel-left, var(--wb-upload-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-upload-field-label-is-fluid__bezel: initial; --wb-upload-field-label-is-fluid__bezel-top: initial; --wb-upload-field-label-is-fluid__bezel-right: initial; --wb-upload-field-label-is-fluid__bezel-bottom: initial; --wb-upload-field-label-is-fluid__bezel-left: initial; } .wb-field-label--fluid::before { position: absolute; content: ""; --wb-upload-field-label-is-fluid__mask-top--value: var(--wb-upload-field-label-is-fluid__mask-top, calc(var(--wb-ds-line-height--default) / 2)); --wb-upload-field-label-is-fluid__mask-bottom--value: var(--wb-upload-field-label-is-fluid__mask-bottom, calc(var(--wb-ds-line-height--default) / 2)); top: calc(50% - var(--wb-upload-field-label-is-fluid__mask-top--value)); bottom: calc(50% - (var(--wb-upload-field-label-is-fluid__mask-bottom--value))); left: calc(-1 * var(--wb-upload-field-label-is-fluid__mask-left, var(--wb-ds-space--xs, 1px))); right: calc(-1 * var(--wb-upload-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-upload-field-label-is-fluid__mask-scale--value: var(--wb-upload-field-label-is-fluid__mask-scale, 0.75); --wb-upload-field-label-is-fluid__mask-translate-x--value: var(--wb-upload-field-label-is-fluid__mask-translate-x, var(--wb-upload-field-label-is-fluid__bezel-left, var(--wb-ds-field-label-is-fluid__bezel-left, var(--wb-ds-space--s, 1rem)))); --wb-upload-field-label-is-fluid__mask-translate-y--value: var(--wb-upload-field-label-is-fluid__mask-translate-y, calc(-100% * var(--wb-upload-field-label-is-fluid__mask-scale--value) / 2)); transform: translate(var(--wb-upload-field-label-is-fluid__mask-translate-x--value), var(--wb-upload-field-label-is-fluid__mask-translate-y--value)) scale(var(--wb-upload-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-upload-field-label-is-fluid__mask-color, var(--wb-ds-field__background, var(--wb-ds-color-background--default))); } :host { display: block; width: 100%; } .wb-upload-field { cursor: pointer; } .wb-upload-field__remove-file { color: var(--wb-upload-field-remove-file__color--state, var(--wb-upload-field-remove-file__color--override, var(--wb-upload-field-remove-file__color, var(--wb-ds-color-text--default)))); font-family: var(--wb-upload-field-remove-file__font-family--state, var(--wb-upload-field-remove-file__font-family--override, var(--wb-upload-field-remove-file__font-family))); font-size: var(--wb-upload-field-remove-file__font-size--state, var(--wb-upload-field-remove-file__font-size--override, var(--wb-upload-field-remove-file__font-size))); font-style: var(--wb-upload-field-remove-file__font-style--state, var(--wb-upload-field-remove-file__font-style--override, var(--wb-upload-field-remove-file__font-style))); font-weight: var(--wb-upload-field-remove-file__font-weight--state, var(--wb-upload-field-remove-file__font-weight--override, var(--wb-upload-field-remove-file__font-weight))); line-height: var(--wb-upload-field-remove-file__line-height--state, var(--wb-upload-field-remove-file__line-height--override, var(--wb-upload-field-remove-file__line-height))); letter-spacing: var(--wb-upload-field-remove-file__letter-spacing--state, var(--wb-upload-field-remove-file__letter-spacing--override, var(--wb-upload-field-remove-file__letter-spacing))); text-transform: var(--wb-upload-field-remove-file__text-transform--state, var(--wb-upload-field-remove-file__text-transform--override, var(--wb-upload-field-remove-file__text-transform))); text-align: var(--wb-upload-field-remove-file__text-align--state, var(--wb-upload-field-remove-file__text-align--override, var(--wb-upload-field-remove-file__text-align))); opacity: var(--wb-upload-field-remove-file__opacity--state, var(--wb-upload-field-remove-file__opacity--override, var(--wb-upload-field-remove-file__opacity))); padding-top: var(--wb-upload-field-remove-file__bezel-top--state, var(--wb-upload-field-remove-file__bezel--state, var(--wb-upload-field-remove-file__bezel-top--override, var(--wb-upload-field-remove-file__bezel--override, var(--wb-upload-field-remove-file__bezel-top, 0))))); padding-right: var(--wb-upload-field-remove-file__bezel-right--state, var(--wb-upload-field-remove-file__bezel--state, var(--wb-upload-field-remove-file__bezel-right--override, var(--wb-upload-field-remove-file__bezel--override, var(--wb-upload-field-remove-file__bezel-right, 0))))); padding-bottom: var(--wb-upload-field-remove-file__bezel-bottom--state, var(--wb-upload-field-remove-file__bezel--state, var(--wb-upload-field-remove-file__bezel-bottom--override, var(--wb-upload-field-remove-file__bezel--override, var(--wb-upload-field-remove-file__bezel-bottom, 0))))); padding-left: var(--wb-upload-field-remove-file__bezel-left--state, var(--wb-upload-field-remove-file__bezel--state, var(--wb-upload-field-remove-file__bezel-left--override, var(--wb-upload-field-remove-file__bezel--override, var(--wb-upload-field-remove-file__bezel-left, 0))))); --wb-upload-field-remove-file__box-shadow--value: var(--wb-upload-field-remove-file__box-shadow--state, var(--wb-upload-field-remove-file__box-shadow--override, var(--wb-upload-field-remove-file__box-shadow, none))); --wb-upload-field-remove-file__border-width--value: var(--wb-upload-field-remove-file__border-width--state, var(--wb-upload-field-remove-file__border-width--override, var(--wb-upload-field-remove-file__border-width, var(--wb-ds-border-width--default)))); --wb-upload-field-remove-file__border-color--value: var(--wb-upload-field-remove-file__border-color--state, var(--wb-upload-field-remove-file__border-color--override, var(--wb-upload-field-remove-file__border-color, var(--wb-ds-color-border--default)))); --wb-upload-field-remove-file__blur-radius--value: var(--wb-upload-field-remove-file__blur-radius--state, var(--wb-upload-field-remove-file__blur-radius--override, var(--wb-upload-field-remove-file__blur-radius, var(--wb-ds-border-blur-radius--default, 0)))); --wb-upload-field-remove-file__spread-radius--value: var(--wb-upload-field-remove-file__spread-radius--state, var(--wb-upload-field-remove-file__spread-radius--override, var(--wb-upload-field-remove-file__spread-radius, var(--wb-ds-border-spread-radius--default, 0)))); --wb-upload-field-remove-file__box-shadow-top--value: var(--wb-upload-field-remove-file__box-shadow-top, inset 0px var(--wb-upload-field-remove-file__border-width--value) var(--wb-upload-field-remove-file__blur-radius--value) var(--wb-upload-field-remove-file__spread-radius--value) var(--wb-upload-field-remove-file__border-color--value)); --wb-upload-field-remove-file__box-shadow-right--value: var(--wb-upload-field-remove-file__box-shadow-right, inset calc(var(--wb-upload-field-remove-file__border-width--value) * -1) 0px var(--wb-upload-field-remove-file__blur-radius--value) var(--wb-upload-field-remove-file__spread-radius--value) var(--wb-upload-field-remove-file__border-color--value)); --wb-upload-field-remove-file__box-shadow-bottom--value: var(--wb-upload-field-remove-file__box-shadow-bottom, inset 0px calc(var(--wb-upload-field-remove-file__border-width--value) * -1) var(--wb-upload-field-remove-file__blur-radius--value) var(--wb-upload-field-remove-file__spread-radius--value) var(--wb-upload-field-remove-file__border-color--value)); --wb-upload-field-remove-file__box-shadow-left--value: var(--wb-upload-field-remove-file__box-shadow-left, inset var(--wb-upload-field-remove-file__border-width--value) 0px var(--wb-upload-field-remove-file__blur-radius--value) var(--wb-upload-field-remove-file__spread-radius--value) var(--wb-upload-field-remove-file__border-color--value)); box-shadow: var(--wb-upload-field-remove-file__box-shadow--value, var(--wb-upload-field-remove-file__box-shadow-left--value), var(--wb-upload-field-remove-file__box-shadow-right--value), var(--wb-upload-field-remove-file__box-shadow-top--value), var(--wb-upload-field-remove-file__box-shadow-bottom--value)); border-top: var(--wb-upload-field-remove-file__border-top--state, var(--wb-upload-field-remove-file__border--state, var(--wb-upload-field-remove-file__border-top--override, var(--wb-upload-field-remove-file__border--override, var(--wb-upload-field-remove-file__border-top, none))))); border-right: var(--wb-upload-field-remove-file__border-right--state, var(--wb-upload-field-remove-file__border--state, var(--wb-upload-field-remove-file__border-right--override, var(--wb-upload-field-remove-file__border--override, var(--wb-upload-field-remove-file__border-right, none))))); border-bottom: var(--wb-upload-field-remove-file__border-bottom--state, var(--wb-upload-field-remove-file__border--state, var(--wb-upload-field-remove-file__border-bottom--override, var(--wb-upload-field-remove-file__border--override, var(--wb-upload-field-remove-file__border-bottom, none))))); border-left: var(--wb-upload-field-remove-file__border-left--state, var(--wb-upload-field-remove-file__border--state, var(--wb-upload-field-remove-file__border-left--override, var(--wb-upload-field-remove-file__border--override, var(--wb-upload-field-remove-file__border-left, none))))); border-radius: var(--wb-upload-field-remove-file__border-radius--state, var(--wb-upload-field-remove-file__border-radius--override, var(--wb-upload-field-remove-file__border-radius, var(--wb-ds-border-radius--medium, var(--wb-ds-border-radius--default))))); outline: var(--wb-upload-field-remove-file__outline--state, var(--wb-upload-field-remove-file__outline--override, var(--wb-upload-field-remove-file__outline, none))); transition: var(--wb-upload-field-remove-file__transition--state, var(--wb-upload-field-remove-file__transition--override, var(--wb-upload-field-remove-file__transition, background var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), color var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), box-shadow var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), border var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function)))); background: var(--wb-upload-field-remove-file__background--state, var(--wb-upload-field-remove-file__background--override, var(--wb-upload-field-remove-file__background, transparent))); text-decoration: var(--wb-upload-field-remove-file__text-decoration--state, var(--wb-upload-field-remove-file__text-decoration--override, var(--wb-upload-field-remove-file__text-decoration))); cursor: var(--wb-upload-field-remove-file__cursor--state, var(--wb-upload-field-remove-file__cursor--override, var(--wb-upload-field-remove-file__cursor, pointer))); width: var(--wb-upload-field-remove-file__width--state, var(--wb-upload-field-remove-file__width--override, var(--wb-upload-field-remove-file__width))); } .wb-upload-field__remove-file * { --wb-upload-field-remove-file__bezel: initial; --wb-upload-field-remove-file__bezel-top: initial; --wb-upload-field-remove-file__bezel-right: initial; --wb-upload-field-remove-file__bezel-bottom: initial; --wb-upload-field-remove-file__bezel-left: initial; } .wb-upload-field__remove-file * { --wb-upload-field-remove-file__border-color: initial; --wb-upload-field-remove-file__border-radius: initial; --wb-upload-field-remove-file__border-width: initial; --wb-upload-field-remove-file__box-shadow: initial; --wb-upload-field-remove-file__box-shadow-top: initial; --wb-upload-field-remove-file__box-shadow-right: initial; --wb-upload-field-remove-file__box-shadow-bottom: initial; --wb-upload-field-remove-file__box-shadow-left: initial; --wb-upload-field-remove-file__border: initial; --wb-upload-field-remove-file__border-top: initial; --wb-upload-field-remove-file__border-right: initial; --wb-upload-field-remove-file__border-bottom: initial; --wb-upload-field-remove-file__border-left: initial; --wb-upload-field-remove-file__outline: initial; --wb-upload-field-remove-file__transition: initial; } .wb-upload-field__remove-file * { --wb-upload-field-remove-file__background: initial; } .wb-upload-field__remove-file:focus { --wb-upload-field-remove-file__opacity--state: var(--wb-upload-field-remove-file__opacity--focus); --wb-upload-field-remove-file__font-weight--state: var(--wb-upload-field-remove-file__font-weight--focus); --wb-upload-field-remove-file__font-style--state: var(--wb-upload-field-remove-file__font-style--focus); --wb-upload-field-remove-file__color--state: var(--wb-upload-field-remove-file__color--focus); --wb-upload-field-remove-file__border-left--state: var(--wb-upload-field-remove-file__border-left--focus); --wb-upload-field-remove-file__border-bottom--state: var(--wb-upload-field-remove-file__border-bottom--focus); --wb-upload-field-remove-file__border-right--state: var(--wb-upload-field-remove-file__border-right--focus); --wb-upload-field-remove-file__border-top--state: var(--wb-upload-field-remove-file__border-top--focus); --wb-upload-field-remove-file__border--state: var(--wb-upload-field-remove-file__border--focus); --wb-upload-field-remove-file__box-shadow--state: var(--wb-upload-field-remove-file__box-shadow--focus); --wb-upload-field-remove-file__transition--state: var(--wb-upload-field-remove-file__transition--focus); --wb-upload-field-remove-file__border-width--state: var(--wb-upload-field-remove-file__border-width--focus); --wb-upload-field-remove-file__border-color--state: var(--wb-upload-field-remove-file__border-color--focus); --wb-upload-field-remove-file__background--state: var(--wb-upload-field-remove-file__background--focus); --wb-upload-field-remove-file__cursor--state: var(--wb-upload-field-remove-file__cursor--focus); --wb-upload-field-remove-file__text-decoration--state: var(--wb-upload-field-remove-file__text-decoration--focus); } .wb-upload-field__remove-file:hover { --wb-upload-field-remove-file__opacity--state: var(--wb-upload-field-remove-file__opacity--hover); --wb-upload-field-remove-file__font-weight--state: var(--wb-upload-field-remove-file__font-weight--hover); --wb-upload-field-remove-file__font-style--state: var(--wb-upload-field-remove-file__font-style--hover); --wb-upload-field-remove-file__color--state: var(--wb-upload-field-remove-file__color--hover); --wb-upload-field-remove-file__border-left--state: var(--wb-upload-field-remove-file__border-left--hover); --wb-upload-field-remove-file__border-bottom--state: var(--wb-upload-field-remove-file__border-bottom--hover); --wb-upload-field-remove-file__border-right--state: var(--wb-upload-field-remove-file__border-right--hover); --wb-upload-field-remove-file__border-top--state: var(--wb-upload-field-remove-file__border-top--hover); --wb-upload-field-remove-file__border--state: var(--wb-upload-field-remove-file__border--hover); --wb-upload-field-remove-file__box-shadow--state: var(--wb-upload-field-remove-file__box-shadow--hover); --wb-upload-field-remove-file__transition--state: var(--wb-upload-field-remove-file__transition--hover); --wb-upload-field-remove-file__border-width--state: var(--wb-upload-field-remove-file__border-width--hover); --wb-upload-field-remove-file__border-color--state: var(--wb-upload-field-remove-file__border-color--hover); --wb-upload-field-remove-file__background--state: var(--wb-upload-field-remove-file__background--hover); --wb-upload-field-remove-file__cursor--state: var(--wb-upload-field-remove-file__cursor--hover); --wb-upload-field-remove-file__text-decoration--state: var(--wb-upload-field-remove-file__text-decoration--hover); } .wb-upload-field__remove-file:active { --wb-upload-field-remove-file__opacity--state: var(--wb-upload-field-remove-file__opacity--active); --wb-upload-field-remove-file__font-weight--state: var(--wb-upload-field-remove-file__font-weight--active); --wb-upload-field-remove-file__font-style--state: var(--wb-upload-field-remove-file__font-style--active); --wb-upload-field-remove-file__color--state: var(--wb-upload-field-remove-file__color--active); --wb-upload-field-remove-file__border-left--state: var(--wb-upload-field-remove-file__border-left--active); --wb-upload-field-remove-file__border-bottom--state: var(--wb-upload-field-remove-file__border-bottom--active); --wb-upload-field-remove-file__border-right--state: var(--wb-upload-field-remove-file__border-right--active); --wb-upload-field-remove-file__border-top--state: var(--wb-upload-field-remove-file__border-top--active); --wb-upload-field-remove-file__border--state: var(--wb-upload-field-remove-file__border--active); --wb-upload-field-remove-file__box-shadow--state: var(--wb-upload-field-remove-file__box-shadow--active); --wb-upload-field-remove-file__transition--state: var(--wb-upload-field-remove-file__transition--active); --wb-upload-field-remove-file__border-width--state: var(--wb-upload-field-remove-file__border-width--active); --wb-upload-field-remove-file__border-color--state: var(--wb-upload-field-remove-file__border-color--active); --wb-upload-field-remove-file__background--state: var(--wb-upload-field-remove-file__background--active); --wb-upload-field-remove-file__cursor--state: var(--wb-upload-field-remove-file__cursor--active); --wb-upload-field-remove-file__text-decoration--state: var(--wb-upload-field-remove-file__text-decoration--active); } .wb-upload-field__remove-file:disabled { --wb-upload-field-remove-file__opacity--state: var(--wb-upload-field-remove-file__opacity--disabled); --wb-upload-field-remove-file__font-weight--state: var(--wb-upload-field-remove-file__font-weight--disabled); --wb-upload-field-remove-file__font-style--state: var(--wb-upload-field-remove-file__font-style--disabled); --wb-upload-field-remove-file__color--state: var(--wb-upload-field-remove-file__color--disabled); --wb-upload-field-remove-file__border-left--state: var(--wb-upload-field-remove-file__border-left--disabled); --wb-upload-field-remove-file__border-bottom--state: var(--wb-upload-field-remove-file__border-bottom--disabled); --wb-upload-field-remove-file__border-right--state: var(--wb-upload-field-remove-file__border-right--disabled); --wb-upload-field-remove-file__border-top--state: var(--wb-upload-field-remove-file__border-top--disabled); --wb-upload-field-remove-file__border--state: var(--wb-upload-field-remove-file__border--disabled); --wb-upload-field-remove-file__box-shadow--state: var(--wb-upload-field-remove-file__box-shadow--disabled); --wb-upload-field-remove-file__transition--state: var(--wb-upload-field-remove-file__transition--disabled); --wb-upload-field-remove-file__border-width--state: var(--wb-upload-field-remove-file__border-width--disabled); --wb-upload-field-remove-file__border-color--state: var(--wb-upload-field-remove-file__border-color--disabled); --wb-upload-field-remove-file__background--state: var(--wb-upload-field-remove-file__background--disabled); --wb-upload-field-remove-file__cursor--state: var(--wb-upload-field-remove-file__cursor--disabled); --wb-upload-field-remove-file__text-decoration--state: var(--wb-upload-field-remove-file__text-decoration--disabled); cursor: not-allowed; } .wb-upload-field__info-text { color: var(--wb-upload-field-placeholder__color, var(--wb-ds-field-placeholder__color, var(--wb-ds-field__color, var(--wb-ds-color-text--default)))); font-family: var(--wb-upload-field-placeholder__font-family, var(--wb-ds-field-placeholder__font-family, var(--wb-ds-field__font-family))); font-size: var(--wb-upload-field-placeholder__font-size, var(--wb-ds-field-placeholder__font-size, var(--wb-ds-field__font-size))); font-style: var(--wb-upload-field-placeholder__font-style, var(--wb-ds-field-placeholder__font-style, var(--wb-ds-field__font-style))); font-weight: var(--wb-upload-field-placeholder__font-weight, var(--wb-ds-field-placeholder__font-weight, var(--wb-ds-field__font-weight))); line-height: var(--wb-upload-field-placeholder__line-height, var(--wb-ds-field-placeholder__line-height, var(--wb-ds-field__line-height))); letter-spacing: var(--wb-upload-field-placeholder__letter-spacing, var(--wb-ds-field-placeholder__letter-spacing, var(--wb-ds-field__letter-spacing))); text-transform: var(--wb-upload-field-placeholder__text-transform, var(--wb-ds-field-placeholder__text-transform, var(--wb-ds-field__text-transform))); text-align: var(--wb-upload-field-placeholder__text-align, var(--wb-ds-field-placeholder__text-align, var(--wb-ds-field__text-align))); opacity: var(--wb-upload-field-placeholder__opacity, var(--wb-ds-field-placeholder__opacity, var(--wb-ds-field__opacity))); } .wb-upload-field__button { color: var(--wb-upload-field-button__color--state, var(--wb-upload-field-button__color--override, var(--wb-upload-field-button__color, var(--wb-button__color, var(--wb-ds-color-text--default))))); font-family: var(--wb-upload-field-button__font-family--state, var(--wb-upload-field-button__font-family--override, var(--wb-upload-field-button__font-family, var(--wb-button__font-family)))); font-size: var(--wb-upload-field-button__font-size--state, var(--wb-upload-field-button__font-size--override, var(--wb-upload-field-button__font-size, var(--wb-button__font-size)))); font-style: var(--wb-upload-field-button__font-style--state, var(--wb-upload-field-button__font-style--override, var(--wb-upload-field-button__font-style, var(--wb-button__font-style)))); font-weight: var(--wb-upload-field-button__font-weight--state, var(--wb-upload-field-button__font-weight--override, var(--wb-upload-field-button__font-weight, var(--wb-button__font-weight)))); line-height: var(--wb-upload-field-button__line-height--state, var(--wb-upload-field-button__line-height--override, var(--wb-upload-field-button__line-height, var(--wb-button__line-height)))); letter-spacing: var(--wb-upload-field-button__letter-spacing--state, var(--wb-upload-field-button__letter-spacing--override, var(--wb-upload-field-button__letter-spacing, var(--wb-button__letter-spacing)))); text-transform: var(--wb-upload-field-button__text-transform--state, var(--wb-upload-field-button__text-transform--override, var(--wb-upload-field-button__text-transform, var(--wb-button__text-transform)))); text-align: var(--wb-upload-field-button__text-align--state, var(--wb-upload-field-button__text-align--override, var(--wb-upload-field-button__text-align, var(--wb-button__text-align)))); opacity: var(--wb-upload-field-button__opacity--state, var(--wb-upload-field-button__opacity--override, var(--wb-upload-field-button__opacity, var(--wb-button__opacity)))); padding-top: var(--wb-upload-field-button__bezel-top--state, var(--wb-upload-field-button__bezel--state, var(--wb-upload-field-button__bezel-top--override, var(--wb-upload-field-button__bezel--override, var(--wb-upload-field-button__bezel-top, var(--wb-button__bezel-top, var(--wb-ds-space--s, 1rem))))))); padding-right: var(--wb-upload-field-button__bezel-right--state, var(--wb-upload-field-button__bezel--state, var(--wb-upload-field-button__bezel-right--override, var(--wb-upload-field-button__bezel--override, var(--wb-upload-field-button__bezel-right, var(--wb-button__bezel-right, var(--wb-ds-space--s, 1rem))))))); padding-bottom: var(--wb-upload-field-button__bezel-bottom--state, var(--wb-upload-field-button__bezel--state, var(--wb-upload-field-button__bezel-bottom--override, var(--wb-upload-field-button__bezel--override, var(--wb-upload-field-button__bezel-bottom, var(--wb-button__bezel-bottom, var(--wb-ds-space--s, 1rem))))))); padding-left: var(--wb-upload-field-button__bezel-left--state, var(--wb-upload-field-button__bezel--state, var(--wb-upload-field-button__bezel-left--override, var(--wb-upload-field-button__bezel--override, var(--wb-upload-field-button__bezel-left, var(--wb-button__bezel-left, var(--wb-ds-space--s, 1rem))))))); --wb-upload-field-button__box-shadow--value: var(--wb-upload-field-button__box-shadow--state, var(--wb-upload-field-button__box-shadow--override, var(--wb-upload-field-button__box-shadow, var(--wb-button__box-shadow)))); --wb-upload-field-button__border-width--value: var(--wb-upload-field-button__border-width--state, var(--wb-upload-field-button__border-width--override, var(--wb-upload-field-button__border-width, var(--wb-button__border-width, var(--wb-ds-border-width--default))))); --wb-upload-field-button__border-color--value: var(--wb-upload-field-button__border-color--state, var(--wb-upload-field-button__border-color--override, var(--wb-upload-field-button__border-color, var(--wb-button__border-color)))); --wb-upload-field-button__blur-radius--value: var(--wb-upload-field-button__blur-radius--state, var(--wb-upload-field-button__blur-radius--override, var(--wb-upload-field-button__blur-radius, var(--wb-button__blur-radius)))); --wb-upload-field-button__spread-radius--value: var(--wb-upload-field-button__spread-radius--state, var(--wb-upload-field-button__spread-radius--override, var(--wb-upload-field-button__spread-radius, var(--wb-button__spread-radius)))); --wb-upload-field-button__box-shadow-top--value: var(--wb-upload-field-button__box-shadow-top, inset 0px var(--wb-upload-field-button__border-width--value) var(--wb-upload-field-button__blur-radius--value) var(--wb-upload-field-button__spread-radius--value) var(--wb-upload-field-button__border-color--value)); --wb-upload-field-button__box-shadow-right--value: var(--wb-upload-field-button__box-shadow-right, inset calc(var(--wb-upload-field-button__border-width--value) * -1) 0px var(--wb-upload-field-button__blur-radius--value) var(--wb-upload-field-button__spread-radius--value) var(--wb-upload-field-button__border-color--value)); --wb-upload-field-button__box-shadow-bottom--value: var(--wb-upload-field-button__box-shadow-bottom, inset 0px calc(var(--wb-upload-field-button__border-width--value) * -1) var(--wb-upload-field-button__blur-radius--value) var(--wb-upload-field-button__spread-radius--value) var(--wb-upload-field-button__border-color--value)); --wb-upload-field-button__box-shadow-left--value: var(--wb-upload-field-button__box-shadow-left, inset var(--wb-upload-field-button__border-width--value) 0px var(--wb-upload-field-button__blur-radius--value) var(--wb-upload-field-button__spread-radius--value) var(--wb-upload-field-button__border-color--value)); box-shadow: var(--wb-upload-field-button__box-shadow--value, var(--wb-upload-field-button__box-shadow-left--value), var(--wb-upload-field-button__box-shadow-right--value), var(--wb-upload-field-button__box-shadow-top--value), var(--wb-upload-field-button__box-shadow-bottom--value)); border-top: var(--wb-upload-field-button__border-top--state, var(--wb-upload-field-button__border--state, var(--wb-upload-field-button__border-top--override, var(--wb-upload-field-button__border--override, var(--wb-upload-field-button__border-top, var(--wb-button__border-top)))))); border-right: var(--wb-upload-field-button__border-right--state, var(--wb-upload-field-button__border--state, var(--wb-upload-field-button__border-right--override, var(--wb-upload-field-button__border--override, var(--wb-upload-field-button__border-right, var(--wb-button__border-right)))))); border-bottom: var(--wb-upload-field-button__border-bottom--state, var(--wb-upload-field-button__border--state, var(--wb-upload-field-button__border-bottom--override, var(--wb-upload-field-button__border--override, var(--wb-upload-field-button__border-bottom, var(--wb-button__border-bottom)))))); border-left: var(--wb-upload-field-button__border-left--state, var(--wb-upload-field-button__border--state, var(--wb-upload-field-button__border-left--override, var(--wb-upload-field-button__border--override, var(--wb-upload-field-button__border-left, var(--wb-button__border-left)))))); border-radius: var(--wb-upload-field-button__border-radius--state, var(--wb-upload-field-button__border-radius--override, var(--wb-upload-field-button__border-radius, var(--wb-button__border-radius, var(--wb-ds-border-radius--medium))))); outline: var(--wb-upload-field-button__outline--state, var(--wb-upload-field-button__outline--override, var(--wb-upload-field-button__outline, var(--wb-button__outline)))); transition: var(--wb-upload-field-button__transition--state, var(--wb-upload-field-button__transition--override, var(--wb-upload-field-button__transition, var(--wb-button__transition, background var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), color var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), box-shadow var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function), border var(--wb-ds-animation-duration--default) var(--wb-ds-animation-timing-function))))); background: var(--wb-upload-field-button__background--state, var(--wb-upload-field-button__background--override, var(--wb-upload-field-button__background, var(--wb-button__background, var(--wb-ds-color-background--default))))); text-decoration: var(--wb-upload-field-button__text-decoration--state, var(--wb-upload-field-button__text-decoration--override, var(--wb-upload-field-button__text-decoration, var(--wb-button__text-decoration)))); cursor: var(--wb-upload-field-button__cursor--state, var(--wb-upload-field-button__cursor--override, var(--wb-upload-field-button__cursor, var(--wb-button__cursor, pointer)))); width: var(--wb-upload-field-button__width--state, var(--wb-upload-field-button__width--override, var(--wb-upload-field-button__width, var(--wb-button__width)))); flex: var(--wb-upload-field-button__flex--override, var(--wb-upload-field-button__flex)); } .wb-upload-field__button * { --wb-upload-field-button__bezel: initial; --wb-upload-field-button__bezel-top: initial; --wb-upload-field-button__bezel-right: initial; --wb-upload-field-button__bezel-bottom: initial; --wb-upload-field-button__bezel-left: initial; } .wb-upload-field__button * { --wb-upload-field-button__border-color: initial; --wb-upload-field-button__border-radius: initial; --wb-upload-field-button__border-width: initial; --wb-upload-field-button__box-shadow: initial; --wb-upload-field-button__box-shadow-top: initial; --wb-upload-field-button__box-shadow-right: initial; --wb-upload-field-button__box-shadow-bottom: initial; --wb-upload-field-button__box-shadow-left: initial; --wb-upload-field-button__border: initial; --wb-upload-field-button__border-top: initial; --wb-upload-field-button__border-right: initial; --wb-upload-field-button__border-bottom: initial; --wb-upload-field-button__border-left: initial; --wb-upload-field-button__outline: initial; --wb-upload-field-button__transition: initial; } .wb-upload-field__button * { --wb-upload-field-button__background: initial; } .wb-upload-field__button:focus { --wb-upload-field-button__opacity--state: var(--wb-upload-field-button__opacity--focus); --wb-upload-field-button__font-weight--state: var(--wb-upload-field-button__font-weight--focus); --wb-upload-field-button__font-style--state: var(--wb-upload-field-button__font-style--focus); --wb-upload-field-button__color--state: var(--wb-upload-field-button__color--focus); --wb-upload-field-button__border-left--state: var(--wb-upload-field-button__border-left--focus); --wb-upload-field-button__border-bottom--state: var(--wb-upload-field-button__border-bottom--focus); --wb-upload-field-button__border-right--state: var(--wb-upload-field-button__border-right--focus); --wb-upload-field-button__border-top--state: var(--wb-upload-field-button__border-top--focus); --wb-upload-field-button__border--state: var(--wb-upload-field-button__border--focus); --wb-upload-field-button__box-shadow--state: var(--wb-upload-field-button__box-shadow--focus); --wb-upload-field-button__transition--state: var(--wb-upload-field-button__transition--focus); --wb-upload-field-button__border-width--state: var(--wb-upload-field-button__border-width--focus); --wb-upload-field-button__border-color--state: var(--wb-upload-field-button__border-color--focus); --wb-upload-field-button__background--state: var(--wb-upload-field-button__background--focus); --wb-upload-field-button__cursor--state: var(--wb-upload-field-button__cursor--focus); --wb-upload-field-button__text-decoration--state: var(--wb-upload-field-button__text-decoration--focus); } .wb-upload-field__button:hover { --wb-upload-field-button__opacity--state: var(--wb-upload-field-button__opacity--hover); --wb-upload-field-button__font-weight--state: var(--wb-upload-field-button__font-weight--hover); --wb-upload-field-button__font-style--state: var(--wb-upload-field-button__font-style--hover); --wb-upload-field-button__color--state: var(--wb-upload-field-button__color--hover); --wb-upload-field-button__border-left--state: var(--wb-upload-field-button__border-left--hover); --wb-upload-field-button__border-bottom--state: var(--wb-upload-field-button__border-bottom--hover); --wb-upload-field-button__border-right--state: var(--wb-upload-field-button__border-right--hover); --wb-upload-field-button__border-top--state: var(--wb-upload-field-button__border-top--hover); --wb-upload-field-button__border--state: var(--wb-upload-field-button__border--hover); --wb-upload-field-button__box-shadow--state: var(--wb-upload-field-button__box-shadow--hover); --wb-upload-field-button__transition--state: var(--wb-upload-field-button__transition--hover); --wb-upload-field-button__border-width--state: var(--wb-upload-field-button__border-width--hover); --wb-upload-field-button__border-color--state: var(--wb-upload-field-button__border-color--hover); --wb-upload-field-button__background--state: var(--wb-upload-field-button__background--hover); --wb-upload-field-button__cursor--state: var(--wb-upload-field-button__cursor--hover); --wb-upload-field-button__text-decoration--state: var(--wb-upload-field-button__text-decoration--hover); } .wb-upload-field__button:active { --wb-upload-field-button__opacity--state: var(--wb-upload-field-button__opacity--active); --wb-upload-field-button__font-weight--state: var(--wb-upload-field-button__font-weight--active); --wb-upload-field-button__font-style--state: var(--wb-upload-field-button__font-style--active); --wb-upload-field-button__color--state: var(--wb-upload-field-button__color--active); --wb-upload-field-button__border-left--state: var(--wb-upload-field-button__border-left--active); --wb-upload-field-button__border-bottom--state: var(--wb-upload-field-button__border-bottom--active); --wb-upload-field-button__border-right--state: var(--wb-upload-field-button__border-right--active); --wb-upload-field-button__border-top--state: var(--wb-upload-field-button__border-top--active); --wb-upload-field-button__border--state: var(--wb-upload-field-button__border--active); --wb-upload-field-button__box-shadow--state: var(--wb-upload-field-button__box-shadow--active); --wb-upload-field-button__transition--state: var(--wb-upload-field-button__transition--active); --wb-upload-field-button__border-width--state: var(--wb-upload-field-button__border-width--active); --wb-upload-field-button__border-color--state: var(--wb-upload-field-button__border-color--active); --wb-upload-field-button__background--state: var(--wb-upload-field-button__background--active); --wb-upload-field-button__cursor--state: var(--wb-upload-field-button__cursor--active); --wb-upload-field-button__text-decoration--state: var(--wb-upload-field-button__text-decoration--active); } .wb-upload-field__button:disabled { --wb-upload-field-button__opacity--state: var(--wb-upload-field-button__opacity--disabled); --wb-upload-field-button__font-weight--state: var(--wb-upload-field-button__font-weight--disabled); --wb-upload-field-button__font-style--state: var(--wb-upload-field-button__font-style--disabled); --wb-upload-field-button__color--state: var(--wb-upload-field-button__color--disabled); --wb-upload-field-button__border-left--state: var(--wb-upload-field-button__border-left--disabled); --wb-upload-field-button__border-bottom--state: var(--wb-upload-field-button__border-bottom--disabled); --wb-upload-field-button__border-right--state: var(--wb-upload-field-button__border-right--disabled); --wb-upload-field-button__border-top--state: var(--wb-upload-field-button__border-top--disabled); --wb-upload-field-button__border--state: var(--wb-upload-field-button__border--disabled); --wb-upload-field-button__box-shadow--state: var(--wb-upload-field-button__box-shadow--disabled); --wb-upload-field-button__transition--state: var(--wb-upload-field-button__transition--disabled); --wb-upload-field-button__border-width--state: var(--wb-upload-field-button__border-width--disabled); --wb-upload-field-button__border-color--state: var(--wb-upload-field-button__border-color--disabled); --wb-upload-field-button__background--state: var(--wb-upload-field-button__background--disabled); --wb-upload-field-button__cursor--state: var(--wb-upload-field-button__cursor--disabled, not-allowed); --wb-upload-field-button__text-decoration--state: var(--wb-upload-field-button__text-decoration--disabled); } .wb-upload-field__input { display: none; }

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