@layer components {
  .text-area {
    border-radius: var(--radius-1);
    border: solid 1px var(--gray-3);
    box-shadow: var(--shadow-1);
    display: inline-block;
    field-sizing: content;
    font: inherit;
    height: 100%;
    outline: none;
    padding: var(--size-2) var(--size-2);

    &:focus {
      border-color: var(--blue-8);
    }

  }

  .text-area:user-invalid, .text-area\:error {
    background-color: var(--red-0);
    border-color: var(--red-8);
    color: var(--red-8);
  }

  .text-area\:full {
    width: 100%;
  }
}