@use 'sass:math';
@use './vars.scss' as *;
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' as *;

//
// Banner
// Global banner in the header.
//

$banner-dark-background: var(--teal-dark);
$banner-dark-foreground: var(--white);

.o-banner {
  padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em 0;
  background: var(--gold-10);
  border-bottom: 1px solid var(--gray-40);
  font-size: 0.875em;

  // Override notification box styling to align notification in header.
  .m-notification {
    border: none;
    padding: 0;

    &__icon {
      left: 0;
      top: 0;
    }
  }

  &--dark {
    background: $banner-dark-background;
    border-color: $banner-dark-background;
    color: $banner-dark-foreground;

    .m-notification {
      background: $banner-dark-background;

      .cf-icon-svg {
        fill: $banner-dark-foreground;
      }

      a {
        // Colors for :link, :visited, :hover, :focus, :active.
        @include u-link-colors(
          $banner-dark-foreground,
          var(--teal-40),
          var(--gray-15),
          var(--white),
          var(--gray-15)
        );
      }
    }
  }

  // Tablet and above.
  @include respond-to-min($bp-sm-min) {
    font-size: 1em;
  }
}