.q.react-aria-TextField,
.q.react-aria-TextAreaField {
  position: relative;

  .react-aria-Label {
    color: var(--quanta-sapphire);
    pointer-events: none;
    touch-action: none;
    transition:
      margin-top 0.15s ease-in-out,
      margin-left 0.15s ease-in-out,
      transform 0.15s ease-in-out;
    user-select: none;
  }

  .react-aria-Label:has(+ .react-aria-Input, + .react-aria-TextArea) {
    position: absolute;
    top: 10px;
    left: 12px;
  }

  .react-aria-Label:has(
      + .react-aria-Input[data-focused],
      + .react-aria-TextArea[data-focused]
    ),
  .react-aria-Label:has(
      + .react-aria-Input:not(:placeholder-shown),
      + .react-aria-TextArea:not(:placeholder-shown)
    ) {
    margin-top: -30px;
    margin-left: -12px;
    transform: scale(0.8571428571, 0.8571428571);
    transform-origin: 0 0;
  }

  .react-aria-Label:has(
      + .react-aria-Input:not(:placeholder-shown):not(:hover):not(:active):not(
          :focus
        ),
      + .react-aria-TextArea:not(:placeholder-shown):not(:hover):not(
          :active
        ):not(:focus)
    ) {
    color: var(--basic-500);
  }

  .react-aria-Label:has(
      + .react-aria-Input[required],
      + .react-aria-TextArea[required]
    )::after {
    /* https://yoksel.github.io/url-encoder/ */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(7, 90%25, 59%25)' d='M12 18a6 6 0 100-12 6 6 0 000 12z'/%3E%3C/svg%3E");
  }

  .react-aria-Label:has(
      + .react-aria-Input[required]:not(:placeholder-shown):not(:hover):not(
          :active
        ):not(:focus),
      + .react-aria-TextArea[required]:not(:placeholder-shown):not(:hover):not(
          :active
        ):not(:focus)
    )::after {
    filter: grayscale(1);
  }

  .react-aria-Label:has(
      + .react-aria-Input[data-invalid],
      + .react-aria-TextArea[data-invalid]
    ) {
    color: var(--quanta-candy) !important;

    &::after {
      filter: none !important;
    }
  }

  .react-aria-Label:has(
      + .react-aria-Input[data-disabled],
      + .react-aria-TextArea[data-disabled]
    ) {
    color: var(--basic-400) !important;
  }

  .react-aria-Label:has(
      + .react-aria-Input[readonly],
      + .react-aria-TextArea[readonly]
    ) {
    color: var(--basic-500);
  }
}

.q.react-aria-TextField,
.q.react-aria-TextAreaField {
  .react-aria-Input,
  .react-aria-TextArea {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 6px;
    background-color: var(--basic-200);
    box-shadow: 0 0 0 rgba(2, 19, 34, 0);
    caret-color: var(--quanta-cobalt);
    color: var(--text-color);
    cursor: text;
    text-overflow: ellipsis;
    transition:
      background-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;

    &[data-hovered] {
      background-color: var(--basic-300);
    }

    &[data-focused] {
      background-color: var(--basic-50);
      box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
      outline: 0;
    }

    &[data-invalid] {
      background-color: var(--quanta-ballet);
      outline: 0;

      &[data-focused] {
        background-color: var(--basic-50);
        box-shadow: inset 0 0 0 2px var(--quanta-rose);
      }
    }

    &[data-disabled] {
      background-color: var(--basic-50);
      box-shadow: inset 0 0 0 1px var(--basic-300);
      color: var(--basic-300);
      pointer-events: none;

      & + .react-aria-Text {
        color: var(--basic-300);
      }
    }

    &[readonly] {
      border: 1px dashed var(--basic-400);
      background-color: var(--basic-50);
      box-shadow: none;
    }

    &::placeholder {
      color: var(--basic-400);
      opacity: 0;
      transition: opacity $time-tiny ease-in-out;
    }

    &:active::placeholder,
    &:focus::placeholder {
      opacity: 1;
    }
  }

  .react-aria-Text {
    padding-top: 3px;
    color: var(--basic-500);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.012em;
    line-height: 1.714285714285;
  }
}