@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/design-tokens/sass/color";
@import "~@kaizen/design-tokens/sass/border";
@import "../../variables";
@import "../mixins";

// Vars
$input-disabled-opacity: 0.3;
$input-disabled-border-alpha: 50%;

.wrapper {
  position: relative;
}

.textarea {
  @include form-input-reset;

  border-radius: $border-solid-border-radius;
  width: 100%;
  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
  padding: $spacing-sm;
  color: $color-purple-800-rgb;
  display: block;
  resize: vertical;

  @include form-input-placeholder {
    line-height: 1.5;
    color: $dt-color-form-text-color-placeholder;
  }

  &:disabled {
    resize: none;
  }
}

.textarea:focus + .focusRing {
  $focus-ring-offset: 3px;

  position: absolute;
  background: transparent;
  border-radius: $border-focus-ring-border-radius;
  border-width: $border-focus-ring-border-width;
  border-style: $border-focus-ring-border-style;
  border-color: transparent;
  inset: -$focus-ring-offset;
  pointer-events: none;
}

.textarea.default {
  @include form-input-focus-state {
    background-color: $color-gray-200;
    border-color: $color-gray-600;
  }

  &:focus + .focusRing {
    border-color: $color-blue-500;
  }

  &:not(.error, .caution) {
    &:disabled {
      border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
    }
  }

  &.error {
    border-color: $color-red-500;

    @include form-input-focus-state {
      border-color: $color-red-500;
    }
  }

  &.caution {
    border-color: $color-yellow-600;

    @include form-input-focus-state {
      border-color: $color-yellow-600;
    }
  }

  &.disabled {
    background-color: $color-white;
    border-color: rgba($color-gray-500-rgb, $input-disabled-opacity);
    color: rgba($color-purple-800-rgb, $input-disabled-opacity);

    @include form-input-placeholder {
      opacity: $input-disabled-opacity;
    }
  }
}

// Reversed (Dark Backgrounds)
.textarea.reversed {
  @include form-input-focus-state {
    background: rgba($color-white-rgb, 0.1);
    border-color: $color-white;
  }

  border-color: rgba($color-white-rgb, 0.65);
  background: transparent;
  color: $color-white;

  @include form-input-placeholder {
    line-height: 1.5;
    color: $color-white;
  }

  &:focus + .focusRing {
    border-color: $color-blue-300;
  }

  &.error {
    border-color: $color-red-300;

    @include form-input-focus-state {
      border-color: $color-red-300;
    }
  }

  &.caution {
    border-color: $color-yellow-400;

    @include form-input-focus-state {
      border-color: $color-yellow-400;
    }
  }

  &.disabled {
    background: transparent;
    border-color: rgba($color-white-rgb, $input-disabled-opacity);
    color: rgba($color-white-rgb, $input-disabled-opacity);

    @include form-input-placeholder {
      opacity: $input-disabled-opacity;
    }
  }
}