@import '../../scss/styles.scss';

@layer payload-default {
  .banner {
    font-size: 1rem;
    line-height: base(1);
    border: 0;
    vertical-align: middle;
    background: var(--theme-elevation-100);
    color: var(--theme-elevation-800);
    border-radius: $style-radius-m;
    padding: base(0.5);
    margin-bottom: $baseline;

    &--has-action {
      cursor: pointer;
      text-decoration: none;
    }

    &--has-icon {
      display: flex;

      svg {
        display: block;
      }
    }

    &--type-default {
      // The elevation-900/950 backgrounds invert between themes, and elevation-0
      // inverts with them, so it stays legible in both.
      &.banner--has-action {
        &:active,
        &:hover {
          color: var(--theme-elevation-0);
        }

        &:hover {
          background: var(--theme-elevation-900);
        }

        &:active {
          background: var(--theme-elevation-950);
        }
      }
    }

    &--type-error {
      background: var(--theme-error-100);
      color: var(--theme-error-600);

      svg {
        @include color-svg(var(--theme-error-600));
      }

      &.banner--has-action {
        &:active,
        &:hover {
          color: var(--theme-error-800);

          svg {
            @include color-svg(var(--theme-error-800));
          }
        }

        &:hover {
          background: var(--theme-error-200);
        }

        &:active {
          background: var(--theme-error-300);
        }
      }
    }

    &--type-success {
      background: var(--theme-success-100);
      color: var(--theme-success-600);

      &.banner--has-action {
        &:active,
        &:hover {
          color: var(--theme-success-800);
        }

        &:hover {
          background: var(--theme-success-200);
        }

        &:active {
          background: var(--theme-success-200);
        }
      }
    }

    // Warning sits one ramp step deeper than the other types. The -100 background is
    // close enough to the error type's pink to be hard to tell apart, so -150 pushes
    // the two further apart. The text moves with it to stay above 4.5:1.
    &--type-warning {
      background: var(--theme-warning-150);
      color: var(--theme-warning-650);

      svg {
        @include color-svg(var(--theme-warning-650));
      }

      &.banner--has-action {
        &:active,
        &:hover {
          color: var(--theme-warning-800);

          svg {
            @include color-svg(var(--theme-warning-800));
          }
        }

        &:hover {
          background: var(--theme-warning-250);
        }

        &:active {
          background: var(--theme-warning-300);
        }
      }
    }
  }
}