@use 'sass:math';
@use 'sass:color';

.ls-textarea {
  $root: &;
  display: flex;
  align-items: stretch;
  position: relative;

  &--disabled {
    opacity: 0.8;
    pointer-events: none;
    cursor: not-allowed;
    border-color: $color-disabled;
    overflow: hidden;
  }

  &--light {
    background-color: $color-input-bg;
    color: $color-theme-light-font;
  }

  &--dark {
    background-color: $color-theme-dark;
    color: $color-theme-dark-font;
  }

  &--sm {
    min-height: $field-size-sm;

    & #{$root}__textarea {
      font-size: $font-size-sm;
    }

    & #{$root}__icon {
      font-size: $icon-size-sm;
      width: $field-size-sm;
    }
  }

  &--md {
    min-height: $field-size-md;

    & #{$root}__textarea {
      font-size: $font-size-md;
    }

    & #{$root}__icon {
      font-size: $icon-size-md;
      width: $field-size-md;
    }
  }

  &--lg {
    min-height: $field-size-lg;

    & #{$root}__textarea {
      font-size: $font-size-lg;
    }

    & #{$root}__icon {
      font-size: $icon-size-lg;
      width: $field-size-lg;
    }
  }

  &--rounded {

    & #{$root}__content {

      &--left-padding {
        padding-left: $border-radius-main;
      }

      &--right-padding {
        padding-right: $border-radius-main;
      }
    }
  }

  &--rounded-lg {

    & #{$root}__content {

      &--left-padding {
        padding-left: $border-radius-large;
      }

      &--right-padding {
        padding-right: $border-radius-large;
      }
    }
  }

  &--round {

    & #{$root}__content {

      &--left-padding {
        padding-left: 4 * $sp;
      }

      &--right-padding {
        padding-right: 4 * $sp;
      }
    }
  }

  &__content {
    padding: $sp $field-sp;
    display: inline-block;
    width: 100%;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    &--clickable {
      cursor: pointer;
    }
  }

  &__textarea {
    cursor: text;
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
  }

  &__label {
    display: block;
    color: $color-label;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: $font-size-input-label;
    line-height: $font-size-input-label;
  }

  &__hint {
    color: $color-text-2;
    font-size: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2rem;

    &--error {
      color: $color-error;
    }
  }
}