.ui-textarea {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-areas:
    'textarea textarea'
    'validation counter';

  &--invalid,
  &--with-counter {
    gap: var(--digi--layout--gutter--s);
  }

  &__textarea {
    grid-area: textarea;
  }

  &__counter {
    grid-area: counter;
    color: var(--digi--typography--color--text--dimmed);
    font-size: var(--digi--typography--font-size--s);
  }
  &__validation {
    grid-area: validation;
  }
}
