.textField {
  input,
  textarea {
    @apply w-full px-2 py-1.5 rounded-sm;
    @apply outline outline-1 outline-def-acc-1 bg-def-1 fg-def-1;

    font-size: 0.875rem;
    font-weight: 500;
    font-family: "Archivo", sans-serif;
    line-height: 132%;

    &::placeholder {
      @apply fg-def-4;
    }

    &:hover {
      @apply bg-def-acc-1 outline-def-acc-2;
    }

    &:not(:read-only):focus-visible {
      @apply bg-def-1 outline-def-acc-3;

      box-shadow:
        0 0 0 0.125rem theme(colors.bg.def.1),
        0 0 0 0.1875rem theme(colors.border.semantic.info.1);
    }

    &[data-invalid] {
      @apply outline-semantic-error-4;
    }

    &[data-disabled] {
      @apply outline-def-2 fg-def-4 cursor-not-allowed;
    }

    &[data-readonly] {
      @apply outline-none border-none bg-inherit p-0 cursor-auto resize-none;
    }
  }

  textarea {
    &[data-readonly] {
      @apply overflow-y-hidden;
    }

    &.autoResize {
      @apply resize-none overflow-y-auto;
      transition: height 0.1s ease-out;
    }
  }

  &.horizontal {
    @apply flex-row gap-2 justify-between;

    .inputContainer,
    textarea {
      @apply w-1/2 grow;
    }
  }

  &.s {
    input,
    textarea {
      @apply px-1.5 py-1;
      font-size: 0.75rem;

      &[data-readonly] {
        @apply p-0;
      }
    }

    .inputContainer {
      @apply h-[1.25rem];

      input {
        @apply h-[1.25rem];
      }
    }
  }

  &.inverted {
    input,
    textarea {
      @apply bg-inv-1 fg-inv-1 outline-inv-acc-1;

      &::placeholder {
        @apply fg-inv-4;
      }

      &:hover {
        @apply bg-inv-acc-2 outline-inv-acc-2;
      }

      &:not(:read-only):focus-visible {
        @apply bg-inv-acc-4;
        box-shadow:
          0 0 0 0.125rem theme(colors.bg.inv.1),
          0 0 0 0.1875rem theme(colors.border.semantic.info.1);
      }

      &[data-invalid] {
        @apply outline-semantic-error-4;
      }

      &[data-readonly] {
        @apply outline-def-2 cursor-auto;
        @apply outline-none border-none bg-inherit;
      }
    }
  }

  &.ghost {
    input,
    textarea {
      @apply outline-none;
    }
  }

  .inputContainer {
    @apply inline-block relative w-full h-[1.875rem];

    /* I'm unsure why I have to do this */
    @apply leading-none;

    & > input {
      @apply w-full h-[1.875rem];
    }

    & > .startComponent {
      @apply absolute left-2 top-1/2 transform -translate-y-1/2;
    }

    & > .endComponent {
      @apply absolute right-2 top-1/2 transform -translate-y-1/2;
    }

    & > .startComponent,
    & > .endComponent {
      @apply size-fit;
    }
  }
}
