.inputfield {
  label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;

    &:global(.parent),
    &:global(.parent) ~ span {
      width: 100%;
    }

    &:global(.narrowest),
    &:global(.narrowest) ~ span,
    &:global(.full-field-with-narrowest-input) input {
      width: 8rem;
    }

    &:global(.narrow),
    &:global(.narrow) ~ span,
    &:global(.full-field-with-narrow-input) input {
      width: 10rem;
    }

    &:global(.narrowish),
    &:global(.narrowish) ~ span {
      width: 12.25rem;
    }

    &:global(.average),
    &:global(.average) ~ span {
      width: 18.25rem;
    }

    &:global(.wide),
    &:global(.wide) ~ span {
      width: 32rem;
    }

    &:global(.full),
    &:global(.full) ~ span {
      width: 41.5rem;
    }
  }

  span {
    display: inline-block;
    font-size: var(--font-size-md);
    font-style: normal;
    line-height: 1.5rem;
    &:global(.label) {
      color: var(--text-color-header);
      font-weight: bold;
    }
    &:global(.subtext) {
      font-weight: normal;
    }
    &:global(.hint) {
      color: var(--color-help-text);
      font-weight: normal;
      margin-top: 0.5rem;
    }
    &:global(.error) {
      color: var(--color-error-darker);
      font-weight: normal;
      margin-top: 0.5rem;
    }
  }

  input,
  textarea,
  div:global(.disabled_input) {
    display: flex;
    padding: 1rem 1.5rem 1rem 1rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-style: solid;
    :global(.small) & {
      height: 3rem;
      border-width: 1px;
    }
    :global(.medium) & {
      height: 3.5rem;
      border-width: 2px;
    }
    :global(.large) & {
      height: 4.5rem;
      border-width: 2px;
    }
    :global(.text-area) & {
      border-width: 2px;
    }
  }

  :global(.formatted-overlay) {
    padding: 1rem 1.5rem 1rem 1rem;

    :global(.small) & {
      /* Inset should correspond to input border */
      inset: 1px;
    }
  }

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

  /* Firefox */
  input[type="number"] {
    appearance: textfield;
  }

  input,
  textarea {
    border-color: var(--bg-gray-darkest);
    background: var(--base-white);
    &:hover,
    &:focus,
    &:focus-visible {
      outline: none;
      border-color: var(--border-color-focus);
    }
    &:focus,
    &:focus-visible {
      :global(.large) &,
      :global(.text-area) & {
        box-shadow: 0 0 0 4px var(--shadow-color-focus);
      }
      :global(.medium) &,
      :global(.small) & {
        box-shadow: 0 0 0 3px var(--shadow-color-focus);
      }
    }
    :global(.error) & {
      border-color: var(--color-error-darker);
      background-image: url("../../../assets/icons/error.svg");
      background-size: 1.5rem 1.5rem;
      background-repeat: no-repeat;
      background-position: right 1.5rem center;
      padding-right: 3rem;
    }
  }

  textarea {
    align-items: flex-start;
    resize: none;
    :global(.error) & {
      background-position: right 1.5rem top 1rem;
    }
  }
  div:global(.disabled_input) {
    border: solid var(--bg-gray-darkest);
    background: var(--bg-gray-darker);
    :global(.text-area) & {
      min-height: 12.75rem;
      word-wrap: anywhere;
    }
  }
}
