.spectrum-Textfield {
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  min-width: var(--spectrum-textfield-min-width, var(--spectrum-global-dimension-size-600));
  width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
}

.spectrum-Textfield.spectrum-Textfield--quiet.spectrum-Textfield--multiline
    .spectrum-Textfield-input {
    height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
    min-height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
  }

.spectrum-Textfield-input {
  box-sizing: border-box;
  border: var(--spectrum-textfield-border-size, var(--spectrum-alias-border-size-thin)) solid;
  border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
  padding: 3px
    var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px
    calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) - 1px);
  text-indent: 0;

  width: 100%;
  height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));

  vertical-align: top;
  margin: 0;
  overflow: visible;
  font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base));
  font-size: var(--spectrum-textfield-text-size, var(--spectrum-alias-font-size-default));
  line-height: var(--spectrum-textfield-text-line-height, var(--spectrum-alias-body-text-line-height));
  text-overflow: ellipsis;

  transition: border-color var(--spectrum-global-animation-duration-100, 130ms)
      ease-in-out,
    box-shadow var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;

  outline: none;

  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.spectrum-Textfield-input::placeholder {
    font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
    font-style: var(--spectrum-textfield-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
    transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
    opacity: 1;
  }

.spectrum-Textfield-input::-ms-input-placeholder {
    font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
    font-style: var(--spectrum-textfield-placeholder-text-font-style, var(--spectrum-global-font-style-italic));
    transition: color var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
    opacity: 1;
  }

.spectrum-Textfield-input:lang(ja)::placeholder, .spectrum-Textfield-input:lang(zh)::placeholder, .spectrum-Textfield-input:lang(ko)::placeholder {
      font-style: normal;
    }

.spectrum-Textfield-input:lang(ja)::-ms-input-placeholder, .spectrum-Textfield-input:lang(zh)::-ms-input-placeholder, .spectrum-Textfield-input:lang(ko)::-ms-input-placeholder {
      font-style: normal;
    }

.spectrum-Textfield-input:hover::placeholder {
      font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
    }

.spectrum-Textfield-input:disabled {
    resize: none;
    opacity: 1;
  }

.spectrum-Textfield-input:disabled::placeholder {
      font-weight: var(--spectrum-textfield-placeholder-text-font-weight, var(--spectrum-global-font-weight-regular));
    }

.spectrum-Textfield-input::-ms-clear {
    width: 0;
    height: 0;
  }

.spectrum-Textfield-input::-webkit-inner-spin-button,
  .spectrum-Textfield-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

.spectrum-Textfield-input:-moz-ui-invalid {
    box-shadow: none;
  }

[dir="ltr"] .spectrum-Textfield.is-valid .spectrum-Textfield-input {
    padding-right: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

[dir="rtl"] .spectrum-Textfield.is-valid .spectrum-Textfield-input {
    padding-left: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

[dir="ltr"] .spectrum-Textfield.is-invalid .spectrum-Textfield-input {
    padding-right: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

[dir="rtl"] .spectrum-Textfield.is-invalid .spectrum-Textfield-input {
    padding-left: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

.spectrum-Textfield--multiline .spectrum-Textfield-input {
    height: auto;
    min-height: var(--spectrum-global-dimension-size-700);
    padding: 3px
      var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150))
      5px
      calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) - 1px);
    overflow: auto;
  }

[dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-input {
    padding-left: var(--spectrum-textfield-quiet-padding-x, 0);
}

[dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-input {
    padding-right: var(--spectrum-textfield-quiet-padding-x, 0);
}

[dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-input {
    padding-right: var(--spectrum-textfield-quiet-padding-x, 0);
}

[dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-input {
    padding-left: var(--spectrum-textfield-quiet-padding-x, 0);
}

.spectrum-Textfield--quiet .spectrum-Textfield-input {
    border-radius: 0;
    border-top-width: 0;
    border-bottom-width: var(--spectrum-textfield-quiet-border-size, var(--spectrum-alias-border-size-thin));
    border-left-width: 0;
    border-right-width: 0;
    resize: none;
    overflow-y: hidden;
  }

[dir="ltr"] .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input {
      padding-right: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-quiet-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

[dir="rtl"] .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input {
      padding-left: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-quiet-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

[dir="ltr"] .is-valid.spectrum-Textfield--quiet .spectrum-Textfield-input {
      padding-right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-quiet-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

[dir="rtl"] .is-valid.spectrum-Textfield--quiet .spectrum-Textfield-input {
      padding-left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-quiet-icon-margin-left, var(--spectrum-global-dimension-size-150)));
}

.spectrum-Textfield-validationIcon {
  position: absolute;
  pointer-events: all;
}

[dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-validationIcon {
    padding-right: 0;
}

[dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-validationIcon {
    padding-left: 0;
}

[dir="ltr"] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {

    right: var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150));
}

[dir="rtl"] .spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {

    left: var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150));
}

.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {
    width: var(--spectrum-textfield-validation-icon-width-error, var(--spectrum-global-dimension-size-225));
    height: var(--spectrum-textfield-validation-icon-height-error, var(--spectrum-global-dimension-size-225));
    bottom: calc(var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height)) / 2 - var(--spectrum-textfield-validation-icon-height-error, var(--spectrum-global-dimension-size-225)) / 2);
  }

[dir="ltr"] .spectrum-Textfield--quiet.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {
      right: 0;
}

[dir="rtl"] .spectrum-Textfield--quiet.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {
      left: 0;
}

[dir="ltr"] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
    right: var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150));
}

[dir="rtl"] .spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
    left: var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150));
}

.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
    width: var(--spectrum-textfield-validation-icon-width-valid, var(--spectrum-global-dimension-size-150));
    height: var(--spectrum-textfield-validation-icon-height-valid, var(--spectrum-global-dimension-size-150));
    bottom: calc(var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height)) / 2 - var(--spectrum-textfield-validation-icon-height-valid, var(--spectrum-global-dimension-size-150)) / 2);
  }

[dir="ltr"] .spectrum-Textfield--quiet.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
      right: 0;
}

[dir="rtl"] .spectrum-Textfield--quiet.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
      left: 0;
}

[dir="ltr"] .spectrum-Textfield-icon {
  left: var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150));
}

[dir="rtl"] .spectrum-Textfield-icon {
  right: var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150));
}

.spectrum-Textfield-icon {
  display: block;
  position: absolute;
  height: var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225));
  width: var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225));
  top: calc(var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height)) / 2 - var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) / 2);
}

[dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-icon {
    left: 0;
}

[dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-icon {
    right: 0;
}

[dir="ltr"] .spectrum-Textfield--quiet .spectrum-Textfield-icon ~ .spectrum-Textfield-input {
      padding-left: calc(var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-global-dimension-size-75));
}

[dir="rtl"] .spectrum-Textfield--quiet .spectrum-Textfield-icon ~ .spectrum-Textfield-input {
      padding-right: calc(var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-global-dimension-size-75));
}

[dir="ltr"] .spectrum-Textfield-icon + .spectrum-Textfield-input {
    padding-left: calc(var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)) + var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-global-dimension-size-65));
}

[dir="rtl"] .spectrum-Textfield-icon + .spectrum-Textfield-input {
    padding-right: calc(var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)) + var(--spectrum-alias-workflow-icon-size-m, var(--spectrum-global-dimension-size-225)) + var(--spectrum-global-dimension-size-65));
}

.spectrum-Textfield--multiline .spectrum-Textfield-icon ~ .spectrum-Textfield-input {
      height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
      min-height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
    }

.spectrum-Textfield:hover .spectrum-Textfield-input {
      border-color: var(--spectrum-textfield-border-color-hover, var(--spectrum-alias-border-color-hover));
      box-shadow: none;
    }

.spectrum-Textfield:hover .spectrum-Textfield-input::placeholder {
        color: var(--spectrum-textfield-placeholder-text-color-hover, var(--spectrum-alias-placeholder-text-color-hover));
      }

.spectrum-Textfield:hover .spectrum-Textfield-icon {
      color: var(--spectrum-textfield-icon-color-hover, var(--spectrum-global-color-gray-900));
    }

.spectrum-Textfield:active .spectrum-Textfield-input {
      border-color: var(--spectrum-textfield-border-color-down, var(--spectrum-alias-border-color-mouse-focus));
    }

.spectrum-Textfield:active .spectrum-Textfield-icon {
      color: var(--spectrum-textfield-icon-color-down, var(--spectrum-alias-icon-color-down));
    }

.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon {
      color: var(--spectrum-semantic-positive-color-icon, var(--spectrum-global-color-green-600));
    }

.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon {
      color: var(--spectrum-textfield-validation-icon-color-error, var(--spectrum-semantic-negative-color-icon));
    }

.spectrum-Textfield.is-invalid:hover .spectrum-Textfield-input {
        border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
      }

.spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon {
      color: var(--spectrum-textfield-validation-icon-color-disabled, var(--spectrum-global-color-gray-500));
    }

.spectrum-Textfield.is-disabled .spectrum-Textfield-icon {
      color: var(--spectrum-textfield-icon-color-disabled, var(--spectrum-global-color-gray-500));
    }

.spectrum-Textfield-icon {
  color: var(--spectrum-textfield-icon-color, var(--spectrum-alias-icon-color));
}

.spectrum-Textfield-input {
  background-color: var(--spectrum-textfield-background-color, var(--spectrum-global-color-gray-50));
  border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
  color: var(--spectrum-textfield-text-color, var(--spectrum-alias-text-color));
}

.spectrum-Textfield-input::placeholder {
    color: var(--spectrum-textfield-placeholder-text-color, var(--spectrum-alias-placeholder-text-color));
  }

.spectrum-Textfield.is-focused .spectrum-Textfield-input,
  .spectrum-Textfield-input:focus {
    border-color: var(--spectrum-textfield-border-color-down, var(--spectrum-alias-border-color-mouse-focus));
  }

.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input,
  .spectrum-Textfield-input.focus-ring {
    border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
  }

.spectrum-Textfield.is-invalid .spectrum-Textfield-input {
    border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
  }

.is-keyboardFocused.spectrum-Textfield.is-invalid .spectrum-Textfield-input,
    .spectrum-Textfield.is-invalid .spectrum-Textfield-input.focus-ring {
      border-color: var(--spectrum-textfield-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
      box-shadow: 0 0 0 1px var(--spectrum-textfield-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
    }

.spectrum-Textfield.is-disabled .spectrum-Textfield-input,
  .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input,
  .spectrum-Textfield-input [disabled] {
    background-color: var(--spectrum-textfield-background-color-disabled, var(--spectrum-global-color-gray-200));
    border-color: var(--spectrum-textfield-border-color-disabled, var(--spectrum-alias-border-color-transparent));
    color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
    -webkit-text-fill-color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
  }

.spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input [disabled]::placeholder {
      color: var(--spectrum-textfield-placeholder-text-color-disabled, var(--spectrum-alias-text-color-disabled));
    }

.spectrum-Textfield--quiet .spectrum-Textfield-input {
    background-color: var(--spectrum-textfield-quiet-background-color, var(--spectrum-alias-background-color-transparent));
    border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
  }

:hover.spectrum-Textfield--quiet .spectrum-Textfield-input {
      border-color: var(--spectrum-textfield-quiet-border-color-hover, var(--spectrum-alias-border-color-hover));
    }

:active.spectrum-Textfield--quiet .spectrum-Textfield-input {
      border-color: var(--spectrum-textfield-quiet-border-color-down, var(--spectrum-alias-border-color-mouse-focus));
    }

.is-focused.spectrum-Textfield--quiet .spectrum-Textfield-input,
    .spectrum-Textfield--quiet .spectrum-Textfield-input:focus {
      border-color: var(--spectrum-textfield-quiet-border-color-mouse-focus, var(--spectrum-alias-border-color-mouse-focus));
    }

.is-keyboardFocused.spectrum-Textfield--quiet .spectrum-Textfield-input,
    .spectrum-Textfield--quiet .spectrum-Textfield-input.focus-ring {
      border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
      box-shadow: 0 1px 0 var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
    }

.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input {
      border-color: var(--spectrum-textfield-quiet-border-color-error, var(--spectrum-semantic-negative-color-default));
    }

.is-focused.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input,
      .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input:focus {
        border-color: var(--spectrum-textfield-quiet-border-color-error-mouse-focus, var(--spectrum-semantic-negative-color-state-hover));
      }

.is-keyboardFocused.is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input,
      .is-invalid.spectrum-Textfield--quiet .spectrum-Textfield-input.focus-ring {
        border-color: var(--spectrum-textfield-quiet-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
        box-shadow: 0 1px 0 var(--spectrum-textfield-quiet-border-color-error-key-focus, var(--spectrum-alias-border-color-focus));
      }

.is-disabled:hover.spectrum-Textfield--quiet .spectrum-Textfield-input,
    .is-disabled.spectrum-Textfield--quiet .spectrum-Textfield-input,
    .spectrum-Textfield--quiet .spectrum-Textfield-input [disabled] {
      background-color: var(--spectrum-textfield-quiet-background-color-disabled, var(--spectrum-alias-background-color-transparent));
      border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
    }