@import '../../assets/scss/components/textarea/variables';

.st-textarea {
  $root: &;

  position: relative;
  display: inline-block;
  width: 100%;
  font-size: $st-font-size;
  vertical-align: bottom;

  &__inner {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 5px 15px;
    font-size: inherit;
    line-height: 1.5;
    color: $st-textarea-color;
    resize: none;
    background-color: $st-textarea-fill;
    background-image: none;
    border: $st-textarea-border;
    border-radius: $st-textarea-border-radius;
    transition: $st-border-transition;

    &::placeholder {
      color: $st-textarea-placeholder-color;
    }

    &:hover {
      border-color: $st-textarea-hover-border;
    }

    &:focus {
      border-color: $st-textarea-focus-border;
      outline: none;
    }
  }

  &__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    color: $st-textarea-loader-color;
    transform: translate(-50%, -50%);
  }

  &--disabled {
    #{$root}__inner {
      color: $st-textarea-disabled-color;
      cursor: not-allowed;
      background-color: $st-textarea-disabled-fill;
      border-color: $st-textarea-disabled-border;

      &::placeholder {
        color: $st-textarea-disabled-placeholder-color;
      }
    }
  }

  &--resizable {
    #{$root}__inner {
      resize: vertical;
    }
  }

  &--extra-large {
    font-size: $st-textarea-extra-large-font-size;
  }

  &--large {
    font-size: $st-textarea-large-font-size;
  }

  &--medium {
    font-size: $st-textarea-medium-font-size;
  }

  &--small {
    font-size: $st-textarea-small-font-size;
  }

  &--mini {
    font-size: $st-textarea-mini-font-size;
  }
}