/*
* Textarea theme
*
*/

@import '../../../../style/core/utilities.scss';

.dnb-textarea {
  --textarea-border-color: var(--color-sea-green);
  --textarea-border-color--hover: var(--color-emerald-green);
  --textarea-border-color--disabled: var(--color-black-55);
  --textarea-border-width: 0.0625rem;
  --textarea-border-width--hover: 0.125rem;
  --textarea-color: var(--color-black);
  --textarea-background-color: var(--color-white);
  --textarea-placeholder-color: var(--color-black-55);
  --textarea-placeholder-color--focus: var(--color-black-20);

  &__textarea {
    ::selection {
      background-color: var(--color-mint-green);
      text-shadow: none;
    }
  }

  &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
  &__textarea:not([disabled]):not(#{&}--disabled):not(.no-hover):hover
    ~ &__state {
    --textarea-border-color: var(--textarea-border-color--hover);
    --textarea-border-width: var(--textarea-border-width--hover);
    --textarea-border-inset: ;
  }

  // We may enable this in future – right now it's unclear
  // &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__placeholder,
  // &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__placeholder {
  //   color: var(--color-black);
  // }

  &--disabled {
    --textarea-color: var(--color-black-55);
    --textarea-background-color: var(--color-black-3);
    --textarea-border-color: var(--textarea-border-color--disabled);
  }

  // with status_state = "error"
  &__status--error:not(#{&}--focus)
    &__textarea:not([disabled]):not(#{&}--disabled),
  &__status--error:not(#{&}--focus)
    &__textarea:not([disabled]):not(#{&}--disabled):hover {
    color: var(--color-fire-red);
  }
  &__status--error:not(#{&}--focus)
    &__textarea:not([disabled]):not(#{&}--disabled)
    ~ &__state {
    @include fakeBorder(var(--color-fire-red));
  }
  &__status--error:not(#{&}--focus)
    &__textarea:not([disabled]):not(#{&}--disabled):hover
    ~ &__state {
    @include fakeBorder(var(--color-fire-red), 0.125rem);
  }
}