.mykn-textarea {
  --mykn-textarea-padding-v: 0;
  --mykn-textarea-padding-h: 0;
  --mykn-textarea-font-size: var(--typography-font-size-body-s);
  --mykn-textarea-font-weight: var(--typography-font-weight-normal);
  --mykn-textarea-line-height: var(--typography-line-height-body-s);

  appearance: none;
  align-items: center;
  background: var(--form-textarea-background);
  border: 1px solid var(--form-border);
  border-radius: var(--sizes-border-radius-s);
  box-sizing: border-box;
  color: var(--typography-color-body);
  font-family: var(--typography-font-family-body), serif;
  font-size: var(--mykn-textarea-font-size);
  font-weight: var(--mykn-textarea-font-weight);
  line-height: calc(var(--mykn-textarea-line-height) - 2px);
  margin: 0;
  padding-block: var(--mykn-textarea-padding-v);
  padding-inline: var(--mykn-textarea-padding-h);
  position: relative;
  max-width: 100%;

  &--pad-h {
    --mykn-textarea-padding-h: var(--sizes-spacing-xs-h);
  }

  &--pad-v {
    --mykn-textarea-padding-v: var(
      --mykn-textarea-padding-xs,
      var(--sizes-spacing-xs-v)
    );
  }

  &--size-xl {
    --mykn-textarea-font-size: var(--typography-font-size-xl);
    --mykn-textarea-line-height: var(--typography-line-height-xl);
    --mykn-textarea-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);
  }

  &--size-xs {
    --mykn-textarea-font-size: var(--typography-font-size-body-xs);
    --mykn-textarea-line-height: var(--typography-line-height-body-xs);
    --mykn-textarea-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);
  }

  &--size-xxs {
    --mykn-textarea-font-size: var(--typography-font-size-body-xs);
    --mykn-textarea-line-height: var(--typography-line-height-body-xs);
    --mykn-textarea-padding-xs: calc(var(--sizes-spacing-xs-h) / 2);
    --mykn-textarea-height: calc(
      3 * var(--sizes-spacing-xs-h) + 2px
    ) !important;
    --mykn-textarea-width: calc(3 * var(--sizes-spacing-xs-h) + 2px) !important;
  }

  &:disabled,
  &--disabled,
  &--muted {
    color: var(--typography-color-muted);
    opacity: 0.4;
  }

  &::placeholder {
    color: var(--typography-color-muted);
  }

  &[maxlength] {
    width: auto;
  }

  &--variant-transparent {
    background-color: transparent;
  }

  .mykn-stackctx & + .mykn-icon {
    pointer-events: none;
    color: var(--typography-color-muted);
    inset-block-start: 50%;
    inset-inline-end: var(--sizes-spacing-xs-h);
    position: absolute;
    transform: translateY(-50%);
  }
}