@layer ui-reset, ui;

/* textarea */
@layer ui {
  textarea {
    appearance: none;
    background-color: var(--bg, transparent);
    box-shadow: 0 0 0 1px var(--border-color, var(--ui-neutral-200)) inset;
    padding-block: var(--ui-spacing-3);
    padding-inline: calc(var(--ui-spacing-3) * clamp(1, var(--ui-rounded-scale) * .75, 1.3));
    border-radius: var(--ui-rounded-3);
    font: inherit;
    resize: vertical;
    border: none;
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    display: block;

    @media (width < 600px) {
      font-size: 16px;
    }

    &:not([rows]) {
      field-sizing: content;
      min-height: 6lh;
    }

    &:focus {
      outline: none;
      box-shadow: inset 0 0 0 1px;
    }

    &::-webkit-resizer {
      background-color: #0000;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cline x1='5' y1='13' x2='13' y2='5' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='9' y1='13' x2='13' y2='9' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}