:host {
  display: block;
}

.<%= dasherize(name) %> {
  display: grid;
}

textarea {
  width: 100%;
  min-height: 7rem;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
}

textarea:disabled {
  cursor: not-allowed;
}

textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.<%= dasherize(name) %>__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.<%= dasherize(name) %>__hint,
.<%= dasherize(name) %>__counter,
.<%= dasherize(name) %>__error {
  margin: 0;
}

.<%= dasherize(name) %>__counter {
  white-space: nowrap;
}