@mixin padding {
  padding-top: calc((var(--tui-height) - var(--tui-textarea-padding-offset)) / 2) !important;
  padding-bottom: calc((var(--tui-height) - var(--tui-textarea-padding-offset)) / 2) !important;
}

:host {
  --border: 1px;
  --tui-textarea-min-height: var(--tui-height-s);
  --tui-textarea-max-height: 7.6rem;
  --tui-textarea-padding-offset: 1.25rem;

  @include padding;

  scrollbar-width: thin;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-height: var(--tui-textarea-min-height);
  max-height: var(--tui-textarea-max-height);

  border-top-width: 0;

  &[data-size='m'] {
    @include padding;
  }

  &[data-size='l'] {
    --tui-textarea-padding-offset: 1.5rem;

    @include padding;
  }
}

.content {
  scrollbar-width: thin;

  overflow: auto;
  display: block;

  width: 100%;

  word-wrap: break-word;
  white-space: pre-line;
}