@import "../../helpers";
.sf-textarea {
  box-sizing: border-box;
  position: var(--textarea-position, relative);
  textarea {
    resize: var(--textarea-resize, auto);
    color: var(--textarea-color);
    background-color: var(--textarea-background);
    @include font(
      --textarea-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1,
      var(--font-family--primary)
    );
    width: 100%;
    height: var(--textarea-height);
    padding: var(--form-field-padding-x);
    border: none;
    &:focus {
      --textarea-border-color: var(--c-primary);
      & ~ * {
        --textarea-label-padding: 0;
        --textarea-label-color: var(--c-primary);
        --textarea-label-transform: translate3d(0, -1rem, 0);
        --textarea-label-font-size: var(--font-size--xs);
      }
    }
    &:disabled {
      --textarea-border-color: var(--c-text-disabled);
      --textarea-color: var(--c-text-disabled);
      & ~ * {
        --textarea-label-color: var(--c-text-disabled);
      }
    }
    &:required {
      & ~ * {
        --textarea-label-required: " *";
      }
    }
    &:placeholder-shown {
      & ~ * {
        --textarea-label-padding: 0;
        --textarea-label-transform: translate3d(0, -1rem, 0);
      }
    }
  }
  &__label {
    @include font(
      --textarea-label-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1,
      var(--font-family--primary)
    );
    position: var(--textarea-label-position, absolute);
    padding: var(--form-field-padding-x);
    top: var(--textarea-label-top);
    bottom: var(--textarea-label-bottom);
    left: var(--textarea-label-left, 0);
    right: var(--textarea-label-right);
    transform: var(--textarea-label-transform);
    color: var(--form-field-label-color, var(--c-link));
    transition: var(
      --textarea-label-transition,
      transform 150ms linear,
      font-size 150ms linear
    );
    &::after {
      content: var(--textarea-label-required);
      --textarea-label-color: var(--c-primary);
    }
  }
  &--has-text {
    --textarea-border-color: var(--c-text);
    --textarea-color: var(--c-text);
    --textarea-label-top: 0;
    --textarea-label-font-size: var(--font-size--xs);
    --textarea-label-transform: translate3d(0, -1rem, 0);
    --textarea-label-padding: 0;
  }
  &--invalid {
    --textarea-border-color: var(--c-danger);
    --textarea-label-color: var(--c-danger);
  }
  &__error-message {
    color: var(--textarea-error-message-color, var(--c-danger));
    min-height: calc(var(--font-size--xs) * 1.2);
    @include font(
      --textarea-error-message-font,
      var(--font-weight--medium),
      var(--font-size--xs),
      1.2,
      var(--font-family--secondary)
    );
  }
}