@layer kz-components {
  .wrapper {
    font-family: var(--typography-paragraph-body-font-family);
    font-size: var(--typography-paragraph-body-font-size);
    font-weight: var(--typography-paragraph-body-font-weight);
    line-height: var(--typography-paragraph-body-line-height);
    letter-spacing: var(--typography-paragraph-body-letter-spacing);
    color: var(--color-purple-800-rgb);
  }

  .wrapperAutogrow {
    display: grid;
  }

  .wrapperAutogrow::after {
    content: attr(data-value) ' ';
    white-space: pre-wrap;
    visibility: hidden;
  }

  /* these properties need to be set on both for autogrow to work properly */
  .textarea,
  .wrapperAutogrow::after {
    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
    border-radius: var(--border-solid-border-radius);
    padding: var(--spacing-sm);
    box-sizing: border-box;
    width: 100%;
    font: inherit;
  }

  .textareaAutogrow,
  .wrapperAutogrow::after {
    grid-area: 2 / 1;
  }

  .textarea {
    display: block;
    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
    border-radius: var(--border-solid-border-radius);
    padding: var(--spacing-sm);
    resize: vertical;

    &:focus {
      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
        var(--color-blue-500);
      outline-offset: 1px;
    }

    &:disabled {
      border-color: rgb(var(--color-gray-500-rgb), 0.3);
      resize: none;
    }
  }

  .textareaAutogrow {
    overflow: hidden;
  }

  .default {
    &:not(.error, .caution) {
      &:disabled {
        border-color: rgb(var(--color-gray-500-rgb), 0.3);
      }
    }

    &:focus:not([disabled]),
    &:hover:not([disabled]),
    &:hover:focus:not([disabled]) {
      background-color: var(--color-gray-200);
      border-color: var(--color-gray-600);
    }

    &.error {
      border-color: var(--color-red-500);

      &:focus:not([disabled]),
      &:hover:not([disabled]),
      &:hover:focus:not([disabled]) {
        border-color: var(--color-red-500);
      }
    }

    &.caution {
      border-color: var(--color-yellow-600);

      &:focus:not([disabled]),
      &:hover:not([disabled]),
      &:hover:focus:not([disabled]) {
        border-color: var(--color-yellow-600);
      }
    }

    &.disabled {
      background-color: var(--color-white);
      border-color: rgb(var(--color-gray-500-rgb), 0.3);
      color: rgb(var(--color-purple-800-rgb), 0.3);
    }
  }

  .reversed {
    border-color: rgb(var(--color-white-rgb), 0.65);
    background: transparent;
    color: var(--color-white);

    &:focus {
      outline-color: var(--color-blue-300);
    }

    &:focus:not([disabled]),
    &:hover:not([disabled]),
    &:hover:focus:not([disabled]) {
      background: rgb(var(--color-white-rgb), 0.1);
      border-color: var(--color-white);
    }

    &.error {
      border-color: var(--color-red-300);

      &:focus:not([disabled]),
      &:hover:not([disabled]),
      &:hover:focus:not([disabled]) {
        border-color: var(--color-red-300);
      }
    }

    &.caution {
      border-color: var(--color-yellow-400);

      &:focus:not([disabled]),
      &:hover:not([disabled]),
      &:hover:focus:not([disabled]) {
        border-color: var(--color-yellow-400);
      }
    }

    &.disabled {
      background: transparent;
      border-color: rgb(var(--color-white-rgb), 0.3);
      color: rgb(var(--color-white-rgb), 0.3);
    }
  }
}