/*
 * FormStatus theme
 *
 */

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

.dnb-form-status {
  &__shell {
    color: var(--color-black-80);
    font-size: var(--font-size-small);
  }

  &--error &__shell {
    background-color: var(--color-fire-red-8);

    & > .dnb-icon {
      color: var(--color-fire-red);
      border: none;
    }
  }

  &--warn &__shell {
    background-color: var(--color-sand-yellow);
  }

  &--info &__shell {
    background-color: var(--color-pistachio);
  }

  &--marketing &__shell {
    background-color: var(--color-lavender);
  }

  &:not(#{&}--attention-focus)#{&}__text {
    color: var(--color-black-80);
  }

  &__variant--outlined#{&}--error &__shell {
    @include fakeBorder(var(--color-fire-red));
  }
  &__variant--outlined#{&}--warn &__shell {
    @include fakeBorder(var(--color-accent-yellow));
  }
  &__variant--outlined#{&}--info &__shell {
    @include fakeBorder(var(--color-sea-green));
  }
  &__variant--outlined#{&}--marketing &__shell {
    @include fakeBorder(var(--color-black-55));
  }

  &--error#{&}--attention-focus &__shell,
  &--error#{&}:focus &__shell {
    animation: attention-focus 2s ease-in-out 1 200ms;
  }
  &--error#{&}--attention-focus &__shell > .dnb-icon,
  &--error#{&}:focus &__shell > .dnb-icon {
    animation: attention-focus 2s ease-in-out 1 200ms;
  }
}

@keyframes attention-focus {
  0%,
  100% {
    color: var(--color-fire-red);
    background-color: var(--color-fire-red-8);
    border-color: var(--color-fire-red);
  }

  35% {
    color: var(--color-white);
    background-color: var(--color-fire-red);
    border-color: var(--color-fire-red);
  }
}