@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-textarea-color: $ink-color-text !default;
$ink-textarea-padding: $ink-spacing-xs !default;
$ink-textarea-font-size: $ink-font-size-md !default;
$ink-textarea-line-height: $ink-line-height-xl !default;
$ink-textarea-background-color: #ffffff !default;
$ink-textarea-border-color: $ink-color-border !default;
$ink-textarea-border-radius: $ink-border-radius-md !default;
$ink-textarea-disabled-color: $ink-color-text-disabled !default;
$ink-textarea-word-limit-color: $ink-color-grey-1 !default;
$ink-textarea-word-limit-font-size: $ink-font-size-sm !default;
$ink-textarea-word-limit-line-height: $ink-line-height-sm !default;
$ink-textarea-word-limit-margin-top: $ink-spacing-base !default;

.ink-textarea {
  padding: $ink-textarea-padding;
  background-color: $ink-textarea-background-color;
  box-sizing: border-box;

  &--border {
    border: $ink-one-px solid $ink-textarea-border-color;
    border-radius: $ink-textarea-border-radius;
  }

  &__textarea {
    width: 100%;
    font-size: $ink-textarea-font-size;
    line-height: $ink-textarea-line-height;
    padding: 0;
    margin: 0;
    color: $ink-textarea-color;
    border: none;

    &--h5 {
      &:focus,
      &:focus-visible,
      &:hover,
      &:active {
        outline: none;
      }
    }

    &--disabled {
      color: $ink-textarea-disabled-color;

      &.ink-textarea__textarea--h5 {
        background-color: $ink-textarea-background-color;

        &::-webkit-input-placeholder {
          color: $ink-textarea-disabled-color;
        }
      }
    }
  }

  &__placeholder {
    &--disabled {
      color: $ink-textarea-disabled-color;
    }
  }

  &__word-limit {
    color: $ink-textarea-word-limit-color;
    font-size: $ink-textarea-word-limit-font-size;
    line-height: $ink-textarea-word-limit-line-height;
    margin-top: $ink-textarea-word-limit-margin-top;
    text-align: right;
  }
}