@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 {
      &.button--has-action {
        &: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));
      }

      &.button--has-action {
        &:hover {
          background: var(--theme-error-200);
        }

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

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

      &.button--has-action {
        &:hover {
          background: var(--theme-success-200);
        }

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