.wa-text-field,
:host,
textarea,
input:where(:not(
    /* Exclude inputs that don't accept text */
    [type='button'],
    [type='checkbox'],
    [type='color'],
    [type='file'],
    [type='hidden'],
    [type='image'],
    [type='radio'],
    [type='range'],
    [type='reset'],
    [type='submit']
  )) {
  /* Styling root, i.e. excluding elements within a host.
     This is so that these properties can be overridden.
   */
  &:not(:host *),
  /* Safari and FF don't like :host:not(:host *) or :where(:host) so we need to add :host explicitly.
    However, we can't just specify :host, because then it would become & :host which matches nothing.
    :host(*) is the same as :host and the & prevents it from becoming a descendant selector.
   */
  :host(:is(&, *)) {
    /* Defaults for root element. */
    --outlined-background-color: var(--wa-form-control-background-color);
    --outlined-border-color: var(--wa-form-control-border-color);
    --outlined-text-color: var(--wa-form-control-value-color);

    :where(&),
    :host(:where(&, *)) {
      /* Defaults with 0 specificity.
       * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
       * Instead we provide the fallback when setting
       */
      --border-width: var(--wa-form-control-border-width);
      --box-shadow: initial;
    }
  }

  /* Style native inputs and <wa-input>'s visible container */
  &:not(.wa-text-field *, :host input, :host textarea) {
    border-color: var(--border-color, var(--wa-form-control-border-color));
    border-radius: var(--wa-form-control-border-radius);
    border-style: var(--wa-form-control-border-style);
    cursor: text;
    color: var(--wa-form-control-value-color);
    font-size: var(--wa-size);
    font-family: inherit;
    font-weight: var(--wa-form-control-value-font-weight);
    line-height: var(--wa-form-control-value-line-height);
    vertical-align: middle;
    width: 100%;
    transition:
      background-color var(--wa-transition-normal),
      border var(--wa-transition-normal),
      outline var(--wa-transition-fast);
    transition-timing-function: var(--wa-transition-easing);
  }

  /* Style text controls of inputs, including within <wa-input> */
  &:where(:not(:host, .wa-text-field :is(input, textarea))) {
    background-color: var(--background-color, var(--wa-form-control-background-color));
    border-width: var(--border-width);
    box-shadow: var(--box-shadow);
    padding: var(--wa-space-smaller) var(--wa-space);

    /* Style focused inputs */
    &:focus-within {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    /* Style disabled inputs */
    &:has(:disabled),
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  &:where(input, textarea) {
    /* Actual inputs */
    &:autofill {
      &,
      &:hover,
      &:focus,
      &:active {
        box-shadow: none;
        caret-color: var(--wa-form-control-value-color);
      }
    }

    &::placeholder {
      color: var(--wa-form-control-placeholder-color);
      user-select: none;
      -webkit-user-select: none;
    }
  }
}

.wa-text-field input {
  /*
    Fixes an alignment issue with placeholders.
    https://github.com/shoelace-style/webawesome/issues/342
  */
  height: 100%;
}

.wa-text-field input,
.wa-text-field textarea {
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  cursor: inherit;
  -webkit-appearance: none;
  font: inherit;
}

.wa-pill,
:host([pill]) {
  border-radius: var(--wa-border-radius-pill);
}
