.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) ); } :host { display: block; }