@use '../../../styles/scss/variables' as V;

@mixin set-input-border-color($color) {
  .jds-text-area__input-wrapper textarea {
    border-color: $color;
  }
}

@mixin set-input-bg-color($color) {
  .jds-text-area__input-wrapper textarea {
    background-color: $color;
  }
}

@mixin set-input-caret-color($color) {
  .jds-text-area__input-wrapper textarea {
    caret-color: $color;
  }
}

.jds-text-area {
  font-size: 1rem;
  display: inline-block;

  @include set-input-border-color(V.$gray-500);
  @include set-input-bg-color(V.$gray-50);

  * {
    font-family: inherit;
  }

  &__input-wrapper {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: 4px 0;

    textarea {
      max-width: 100%;
      padding: 10px 8px;
      border-radius: 6px;
      color: V.$gray-800;
    }
  }

  &--empty {
    @include set-input-bg-color(V.$gray-50);
  }

  &--focused {
    @include set-input-caret-color(V.$green-700);
    @include set-input-bg-color(V.$white);

    .jds-text-area__input-wrapper textarea {
      box-shadow: inset 0px 0px 0px 1px V.$yellow-500;

      &:focus {
        outline: none;
      }
    }
  }

  &--hovered {
    @include set-input-border-color(V.$green-700);
    @include set-input-bg-color(V.$white);
  }

  &--error {
    @include set-input-border-color(V.$red-700);
    @include set-input-caret-color(V.$red-700);

    .jds-text-area__input-wrapper textarea {
      box-shadow: none;
    }

    .jds-form-control-label {
      color: V.$red-700;
    }
  }
}