@import "../../helpers";
.sf-textarea {
  box-sizing: border-box;
  position: var(--textarea-position, relative);
  textarea {
    resize: var(--textarea-resize, auto);
    color: var(--textarea-color);
    @include font(
      --textarea-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1,
      var(--font-family--secondary)
    );
    height: var(--textarea-height);
    width: var(--textarea-width);
    padding: var(--textarea-padding, var(--spacer-sm));
    @include border(--textarea-border, 1px, solid, var(--c-link));
    &: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--secondary)
    );
    position: var(--textarea-label-position, absolute);
    padding: var(--textarea-label-padding, var(--spacer-sm));
    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(--textarea-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)
    );
  }
}