.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[for]: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[for]: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-text-field-label-is-fluid__bezel-top, var(--wb-text-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem)));
  padding-right: var(--wb-text-field-label-is-fluid__bezel-right, var(--wb-text-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem)));
  padding-bottom: var(--wb-text-field-label-is-fluid__bezel-bottom, var(--wb-text-field-label-is-fluid__bezel, var(--wb-ds-space--s, 1rem)));
  padding-left: var(--wb-text-field-label-is-fluid__bezel-left, var(--wb-text-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-text-field-label-is-fluid__bezel: initial;
  --wb-text-field-label-is-fluid__bezel-top: initial;
  --wb-text-field-label-is-fluid__bezel-right: initial;
  --wb-text-field-label-is-fluid__bezel-bottom: initial;
  --wb-text-field-label-is-fluid__bezel-left: initial;
}
.wb-field-label--fluid::before {
  position: absolute;
  content: "";
  --wb-text-field-label-is-fluid__mask-top--value: var(--wb-text-field-label-is-fluid__mask-top, calc(var(--wb-ds-line-height--default) / 2));
  --wb-text-field-label-is-fluid__mask-bottom--value: var(--wb-text-field-label-is-fluid__mask-bottom, calc(var(--wb-ds-line-height--default) / 2));
  top: calc(50% - var(--wb-text-field-label-is-fluid__mask-top--value));
  bottom: calc(50% - (var(--wb-text-field-label-is-fluid__mask-bottom--value)));
  left: calc(-1 * var(--wb-text-field-label-is-fluid__mask-left, var(--wb-ds-space--xs, 1px)));
  right: calc(-1 * var(--wb-text-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-text-field-label-is-fluid__mask-scale--value: var(--wb-text-field-label-is-fluid__mask-scale, 0.75);
  --wb-text-field-label-is-fluid__mask-translate-x--value: var(--wb-text-field-label-is-fluid__mask-translate-x, var(--wb-text-field-label-is-fluid__bezel-left, var(--wb-ds-field-label-is-fluid__bezel-left, var(--wb-ds-space--s, 1rem))));
  --wb-text-field-label-is-fluid__mask-translate-y--value: var(--wb-text-field-label-is-fluid__mask-translate-y, calc(-100% * var(--wb-text-field-label-is-fluid__mask-scale--value) / 2));
  transform: translate(var(--wb-text-field-label-is-fluid__mask-translate-x--value), var(--wb-text-field-label-is-fluid__mask-translate-y--value)) scale(var(--wb-text-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-text-field-label-is-fluid__mask-color, var(--wb-ds-field__background, var(--wb-ds-color-background--default)));
}

:host {
  display: block;
  width: 100%;
}
:host input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

@keyframes autofill {
  0%, 100% {
    color: var(--wb-ds-field__color);
    background: transparent;
  }
}
@-webkit-keyframes autofill {
  0%, 100% {
    color: var(--wb-ds-field__color);
    background: transparent;
  }
}
.wb-text-field__input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--wb-text-field__color, var(--wb-ds-field__color));
  font-family: var(--wb-text-field__font-family, var(--wb-ds-field__font-family));
  font-size: var(--wb-text-field__font-size, var(--wb-ds-field__font-size));
  font-style: var(--wb-text-field__font-style, var(--wb-ds-field__font-style));
  font-weight: var(--wb-text-field__font-weight, var(--wb-ds-field__font-weight));
  line-height: var(--wb-text-field__line-height, var(--wb-ds-field__line-height));
  letter-spacing: var(--wb-text-field__letter-spacing, var(--wb-ds-field__letter-spacing));
  text-transform: var(--wb-text-field__text-transform, var(--wb-ds-field__text-transform));
  text-align: var(--wb-text-field__text-align, var(--wb-ds-field__text-align));
  opacity: var(--wb-text-field__opacity, var(--wb-ds-field__opacity));
  padding-top: var(--wb-text-field__bezel-top, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-top, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem)))));
  padding-right: var(--wb-text-field__bezel-right, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-right, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem)))));
  padding-bottom: var(--wb-text-field__bezel-bottom, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-bottom, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem)))));
  padding-left: var(--wb-text-field__bezel-left, var(--wb-text-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-text-field__box-shadow--value: var(--wb-text-field__box-shadow, var(--wb-ds-field__box-shadow--value));
  --wb-text-field__border-width--value: var(--wb-text-field__border-width, var(--wb-ds-field__border-width--value));
  --wb-text-field__border-color--value: var(--wb-text-field__border-color, var(--wb-ds-field__border-color--value));
  --wb-text-field__blur-radius--value: var(--wb-text-field__blur-radius, var(--wb-ds-field__blur-radius--value));
  --wb-text-field__spread-radius--value: var(--wb-text-field__spread-radius, var(--wb-ds-field__spread-radius--value));
  --wb-text-field__box-shadow-top--value: var(--wb-text-field__box-shadow-top, inset 0px var(--wb-text-field__border-width--value) var(--wb-text-field__blur-radius--value) var(--wb-text-field__spread-radius--value) var(--wb-text-field__border-color--value));
  --wb-text-field__box-shadow-right--value: var(--wb-text-field__box-shadow-right, inset calc(var(--wb-text-field__border-width--value) * -1) 0px var(--wb-text-field__blur-radius--value) var(--wb-text-field__spread-radius--value) var(--wb-text-field__border-color--value));
  --wb-text-field__box-shadow-bottom--value: var(--wb-text-field__box-shadow-bottom, inset 0px calc(var(--wb-text-field__border-width--value) * -1) var(--wb-text-field__blur-radius--value) var(--wb-text-field__spread-radius--value) var(--wb-text-field__border-color--value));
  --wb-text-field__box-shadow-left--value: var(--wb-text-field__box-shadow-left, inset var(--wb-text-field__border-width--value) 0px var(--wb-text-field__blur-radius--value) var(--wb-text-field__spread-radius--value) var(--wb-text-field__border-color--value));
  box-shadow: var(--wb-text-field__box-shadow--value, var(--wb-text-field__box-shadow-left--value), var(--wb-text-field__box-shadow-right--value), var(--wb-text-field__box-shadow-top--value), var(--wb-text-field__box-shadow-bottom--value));
  border-top: var(--wb-text-field__border-top, var(--wb-text-field__border, var(--wb-ds-field__border-top, var(--wb-ds-border-is-border))));
  border-right: var(--wb-text-field__border-right, var(--wb-text-field__border, var(--wb-ds-field__border-right, var(--wb-ds-border-is-border))));
  border-bottom: var(--wb-text-field__border-bottom, var(--wb-text-field__border, var(--wb-ds-field__border-bottom, var(--wb-ds-border-is-border))));
  border-left: var(--wb-text-field__border-left, var(--wb-text-field__border, var(--wb-ds-field__border-left, var(--wb-ds-border-is-border))));
  border-radius: var(--wb-text-field__border-radius, var(--wb-ds-field__border-radius, var(--wb-ds-border-radius--default)));
  outline: var(--wb-text-field__outline, var(--wb-ds-field__outline, var(--wb-ds-border-is-outline)));
  transition: var(--wb-text-field__transition, var(--wb-ds-field__transition));
  background: var(--wb-text-field__background, var(--wb-ds-field__background, var(--wb-ds-color-background--default, initial)));
  text-decoration: var(--wb-text-field__text-decoration, var(--wb-ds-field__text-decoration));
  cursor: var(--wb-text-field__cursor, text);
  box-sizing: border-box;
  resize: none;
  width: 100%;
  height: var(--wb-text-field__input-height);
}
.wb-text-field__input * {
  --wb-text-field__bezel: initial;
  --wb-text-field__bezel-top: initial;
  --wb-text-field__bezel-right: initial;
  --wb-text-field__bezel-bottom: initial;
  --wb-text-field__bezel-left: initial;
}
.wb-text-field__input * {
  --wb-text-field__border-color: initial;
  --wb-text-field__border-radius: initial;
  --wb-text-field__border-width: initial;
  --wb-text-field__box-shadow: initial;
  --wb-text-field__box-shadow-top: initial;
  --wb-text-field__box-shadow-right: initial;
  --wb-text-field__box-shadow-bottom: initial;
  --wb-text-field__box-shadow-left: initial;
  --wb-text-field__border: initial;
  --wb-text-field__border-top: initial;
  --wb-text-field__border-right: initial;
  --wb-text-field__border-bottom: initial;
  --wb-text-field__border-left: initial;
  --wb-text-field__outline: initial;
  --wb-text-field__transition: initial;
}
.wb-text-field__input * {
  --wb-text-field__background: initial;
}
.wb-text-field__input.interacted.valid, .wb-text-field__input.interacted:valid, .wb-text-field__input:--interacted:valid {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--valid);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--valid);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--valid);
  --wb-text-field__color: var(--wb-ds-field__color--valid);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--valid);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--valid);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--valid);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--valid);
  --wb-text-field__border: var(--wb-ds-field__border--valid);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--valid);
  --wb-text-field__transition: var(--wb-ds-field__transition--valid);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--valid);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--valid);
  --wb-text-field__background: var(--wb-ds-field__background--valid);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--valid);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--valid);
}
.wb-text-field__input.interacted.invalid, .wb-text-field__input.interacted:invalid, .wb-text-field__input:--interacted:invalid {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--invalid);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--invalid);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--invalid);
  --wb-text-field__color: var(--wb-ds-field__color--invalid);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--invalid);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--invalid);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--invalid);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--invalid);
  --wb-text-field__border: var(--wb-ds-field__border--invalid);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--invalid);
  --wb-text-field__transition: var(--wb-ds-field__transition--invalid);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--invalid);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--invalid);
  --wb-text-field__background: var(--wb-ds-field__background--invalid);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--invalid);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--invalid);
}
.wb-text-field__input:hover, .wb-text-field__input.interacted:hover {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--hover);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--hover);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--hover);
  --wb-text-field__color: var(--wb-ds-field__color--hover);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--hover);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--hover);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--hover);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--hover);
  --wb-text-field__border: var(--wb-ds-field__border--hover);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--hover);
  --wb-text-field__transition: var(--wb-ds-field__transition--hover);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--hover);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--hover);
  --wb-text-field__background: var(--wb-ds-field__background--hover);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--hover);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--hover);
}
.wb-text-field__input:focus, .wb-text-field__input.interacted:focus {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--focus);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--focus);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--focus);
  --wb-text-field__color: var(--wb-ds-field__color--focus);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--focus);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--focus);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--focus);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--focus);
  --wb-text-field__border: var(--wb-ds-field__border--focus);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--focus);
  --wb-text-field__transition: var(--wb-ds-field__transition--focus);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--focus);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--focus);
  --wb-text-field__background: var(--wb-ds-field__background--focus);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--focus);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--focus);
}
.wb-text-field__input:active, .wb-text-field__input.interacted:active {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--active);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--active);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--active);
  --wb-text-field__color: var(--wb-ds-field__color--active);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--active);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--active);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--active);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--active);
  --wb-text-field__border: var(--wb-ds-field__border--active);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--active);
  --wb-text-field__transition: var(--wb-ds-field__transition--active);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--active);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--active);
  --wb-text-field__background: var(--wb-ds-field__background--active);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--active);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--active);
}
.wb-text-field__input:disabled, .wb-text-field__input.interacted:disabled {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--disabled);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--disabled);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--disabled);
  --wb-text-field__color: var(--wb-ds-field__color--disabled);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--disabled);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--disabled);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--disabled);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--disabled);
  --wb-text-field__border: var(--wb-ds-field__border--disabled);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--disabled);
  --wb-text-field__transition: var(--wb-ds-field__transition--disabled);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--disabled);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--disabled);
  --wb-text-field__background: var(--wb-ds-field__background--disabled);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--disabled, not-allowed);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--disabled);
  opacity: var(--wb-text-field__opacity, var(--wb-ds-field__opacity--disabled, 0.7));
}
.wb-text-field__input :-webkit-autofill, .wb-text-field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--wb-text-field__color, var(--wb-ds-field__color));
}
.wb-text-field__input :-webkit-autofill:hover, .wb-text-field__input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--wb-text-field__color, var(--wb-ds-field__color--hover));
}
.wb-text-field__input :-webkit-autofill:focus, .wb-text-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wb-text-field__color, var(--wb-ds-field__color--focus));
}
.wb-text-field__input:checked, .wb-text-field__input.interacted:checked {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--valid);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--valid);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--valid);
  --wb-text-field__color: var(--wb-ds-field__color--valid);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--valid);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--valid);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--valid);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--valid);
  --wb-text-field__border: var(--wb-ds-field__border--valid);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--valid);
  --wb-text-field__transition: var(--wb-ds-field__transition--valid);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--valid);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--valid);
  --wb-text-field__background: var(--wb-ds-field__background--valid);
  --wb-text-field__cursor: var(--wb-ds-field__cursor--valid);
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--valid);
}
.wb-text-field__input:-webkit-autofill {
  -webkit-animation-delay: 1s;
  
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}
.wb-text-field__input--textarea {
  min-height: var(--wb-text-field-is-textarea__min-height--override, var(--wb-text-field-is-textarea__min-height, auto));
  max-height: var(--wb-text-field-is-textarea__max-height--override, var(--wb-text-field-is-textarea__max-height, auto));
  max-width: 100%;
  resize: var(--wb-text-field-is-textarea__resize--override, var(--wb-text-field-is-textarea__resize, vertical));
}
.wb-text-field__input:read-only, .wb-text-field__input.interacted:read-only {
  --wb-text-field__opacity: var(--wb-ds-field__opacity--disabled);
  --wb-text-field__font-weight: var(--wb-ds-field__font-weight--disabled);
  --wb-text-field__font-style: var(--wb-ds-field__font-style--disabled);
  --wb-text-field__color: var(--wb-ds-field__color--disabled);
  --wb-text-field__border-left: var(--wb-ds-field__border-left--disabled);
  --wb-text-field__border-bottom: var(--wb-ds-field__border-bottom--disabled);
  --wb-text-field__border-right: var(--wb-ds-field__border-right--disabled);
  --wb-text-field__border-top: var(--wb-ds-field__border-top--disabled);
  --wb-text-field__border: var(--wb-ds-field__border--disabled);
  --wb-text-field__box-shadow: var(--wb-ds-field__box-shadow--disabled);
  --wb-text-field__transition: var(--wb-ds-field__transition--disabled);
  --wb-text-field__border-width: var(--wb-ds-field__border-width--disabled);
  --wb-text-field__border-color: var(--wb-ds-field__border-color--disabled);
  --wb-text-field__background: var(--wb-ds-field__background--disabled);
  --wb-text-field__cursor: default;
  --wb-text-field__text-decoration: var(--wb-ds-field__text-decoration--disabled);
  opacity: var(--wb-text-field__opacity, var(--wb-ds-field__opacity--disabled, 0.7));
}

.wb-text-field__container {
  position: relative;
  display: flex;
}
.wb-text-field__container--icon-start-inside .wb-text-field__input {
  
  padding-left: calc(var(--wb-text-field__bezel-left, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-left, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem))))) + var(--wb-text-field__icon-size, var(--wb-icon__size, 1rem)) + var(--wb-text-field__icon-space, var(--wb-ds-space--s, 1rem)));
  
}

.wb-text-field__icon,
.wb-text-field__clear-button {
  display: block;
  position: absolute;
  z-index: var(--wb-ds-zindex-element);
  align-self: center;
}
.wb-text-field__icon--textarea,
.wb-text-field__clear-button--textarea {
  top: var(--wb-text-field__bezel-top, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-top, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem)))));
}

.wb-text-field__icon {
  pointer-events: none;
}
.wb-text-field__icon--start-inside {
  left: var(--wb-text-field__bezel-left, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-left, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem)))));
}

.wb-text-field__clear-button {
  --wb-button__color: var(--wb-ds-field__color);
  right: var(--wb-text-field__bezel-right, var(--wb-text-field__bezel, var(--wb-ds-field__bezel-right, var(--wb-ds-field__bezel, var(--wb-ds-space--s, 1rem)))));
}

[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-results-button,
[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

:host(.is-mobile) input[type=date] {
  
  
  min-height: calc(var(--wb-text-field__bezel-top, var(--wb-ds-field__bezel-top, var(--wb-ds-space--xs, 4px))) + var(--wb-text-field__line-height, var(--wb-ds-field__line-height, var(--wb-ds-line-height--default, inherit))) + var(--wb-text-field__bezel-bottom, var(--wb-ds-field__bezel-bottom, var(--wb-ds-space--xs, 4px))));
  
}

.wb-text-field__input::placeholder,
[type=date]:invalid::-webkit-datetime-edit {
  color: var(--wb-text-field-placeholder__color, var(--wb-ds-field-placeholder__color, var(--wb-ds-field__color, var(--wb-ds-color-text--disabled))));
  font-family: var(--wb-text-field-placeholder__font-family, var(--wb-ds-field-placeholder__font-family, var(--wb-ds-field__font-family)));
  font-size: var(--wb-text-field-placeholder__font-size, var(--wb-ds-field-placeholder__font-size, var(--wb-ds-field__font-size)));
  font-style: var(--wb-text-field-placeholder__font-style, var(--wb-ds-field-placeholder__font-style, var(--wb-ds-field__font-style)));
  font-weight: var(--wb-text-field-placeholder__font-weight, var(--wb-ds-field-placeholder__font-weight, var(--wb-ds-field__font-weight)));
  line-height: var(--wb-text-field-placeholder__line-height, var(--wb-ds-field-placeholder__line-height, var(--wb-ds-field__line-height)));
  letter-spacing: var(--wb-text-field-placeholder__letter-spacing, var(--wb-ds-field-placeholder__letter-spacing, var(--wb-ds-field__letter-spacing)));
  text-transform: var(--wb-text-field-placeholder__text-transform, var(--wb-ds-field-placeholder__text-transform, var(--wb-ds-field__text-transform)));
  text-align: var(--wb-text-field-placeholder__text-align, var(--wb-ds-field-placeholder__text-align, var(--wb-ds-field__text-align)));
  opacity: var(--wb-text-field-placeholder__opacity, var(--wb-ds-field-placeholder__opacity, var(--wb-ds-field__opacity)));
}

.wb-text-field__input:read-only::placeholder,
.wb-text-field__input:disabled::placeholder {
  --wb-text-field-placeholder__color: var(
      --wb-text-field-placeholder__color--disabled,
      var(
          --wb-ds-field-placeholder__color--disabled,
          var(--wb-ds-field__color--disabled, var(--wb-ds-color-text--disabled))
      )
  );
}

.wb-text-field__length-validation {
  pointer-events: none;
  position: absolute;
  right: var(--wb-text-field-length-validation__position-right, var(--wb-text-field__bezel-right--value, 0.7rem));
  bottom: var(--wb-text-field-length-validation__position-bottom, var(--wb-text-field__bezel-bottom--value, 0.7rem));
  opacity: var(--wb-text-field-length-validation__opacity, 0.7);
  background: var(--wb-text-field-length-validation__background, transparent);
  padding-left: var(--wb-text-field-length-validation__bezel-left, 0);
  padding-right: var(--wb-text-field-length-validation__bezel-right, 0);
  color: var(--wb-text-field-length-validation__color, var(--wb-ds-field__color));
  font-family: var(--wb-text-field-length-validation__font-family);
  font-size: var(--wb-text-field-length-validation__font-size);
  font-style: var(--wb-text-field-length-validation__font-style);
  font-weight: var(--wb-text-field-length-validation__font-weight);
  line-height: var(--wb-text-field-length-validation__line-height);
  letter-spacing: var(--wb-text-field-length-validation__letter-spacing);
  text-transform: var(--wb-text-field-length-validation__text-transform);
  text-align: var(--wb-text-field-length-validation__text-align);
  opacity: var(--wb-text-field-length-validation__opacity);
}
.wb-text-field__length-validation * {
  --wb-text-field-length-validation__bezel: initial;
  --wb-text-field-length-validation__bezel-left: initial;
  --wb-text-field-length-validation__bezel-right: initial;
}
.wb-text-field__length-validation.invalid {
  --wb-text-field-length-validation__color: var(
      --wb-text-field-length-validation__color--invalid,
      var(--wb-ds-color-error--default, inherit)
  );
}