// This is a copy of the entire ~uswds/src/stylesheets/components/banner.scss file
// so that we can convert the rem values for USWDS v3.

@import '../../override-function';

.usa-banner {
    background-color: $color-gray-lightest;
    padding-bottom: scale-rem(0.7rem);
  
    @include media($small-screen) {
      font-size: $h6-font-size;
      padding-bottom: 0;
    }
  }
  
  .usa-banner-content {
    @include padding(null $site-margins-mobile 3px $site-margins-mobile);
    background-color: transparent;
    font-size: $h5-font-size;
    padding-top: scale-rem(2rem);
    width: 100%;
  
    @include media($medium-screen) {
      padding-bottom: 23px;
    }
  
    @include media($nav-width) {
      @include padding(null $site-margins);
    }
  
    p {
      &:first-child {
        margin-top: scale-rem(1rem);
  
        @include media($medium-screen) {
          margin-top: 0;
        }
      }
    }
  }
  
  .usa-banner-inner {
    @include outer-container($site-max-width);
    @include padding(null $site-margins-mobile);
  
    @include media($nav-width) {
      @include padding(null $site-margins);
    }
  }
  
  .usa-banner-header {
    @include padding(scale-rem(0.55rem) null);
    font-size: scale-rem(1.2rem);
    font-weight: $font-normal;
  
    @include media($small-screen) {
      @include padding(0 null);
    }
  
    p {
      @include margin(0 null);
      display: inline;
      overflow: hidden;
      vertical-align: middle;
  
      @include media($small-screen) {
        @include margin(2px null);
        display: inline-block;
      }
    }
  
    img {
      float: left;
      margin-right: scale-rem(1rem);
      margin-top: 1px;
      width: scale-rem(2.4rem);
  
      @include media($small-screen) {
        margin-right: 7px;
        width: 20px;
      }
    }
  }
  
  .usa-banner-header-expanded {
    align-items: center;
    border-bottom: 1px solid $color-gray-light;
    display: flex;
    font-size: $h5-font-size;
    min-height: scale-rem(5.6rem);
    padding-right: scale-rem(3rem);
  
    @include media($small-screen) {
      border-bottom: none;
      display: block;
      font-size: scale-rem(1.2rem);
      font-weight: $font-normal;
      min-height: 0;
      padding-right: 0;
    }
  
    > .usa-banner-inner {
      margin-left: 0;
  
      @include media($small-screen) {
        margin-left: auto;
      }
    }
  
    img {
      margin-right: scale-rem(2.4rem);
  
      @include media($small-screen) {
        margin-right: scale-rem(0.7rem);
      }
    }
  
    p {
      line-height: $heading-line-height;
      vertical-align: top;
  
      @include media($small-screen) {
        line-height: $base-line-height;
        vertical-align: middle;
      }
    }
  }
  
  .usa-banner-button {
    @include button-unstyled;
    @include padding(13px null null 48px);
    background-position-x: right;
    color: $color-primary;
    display: block;
    font-size: 12px;
    height: scale-rem(4.3rem);
    left: 0;
    position: absolute;
    text-decoration: underline;
    top: 0;
    width: 100%;
  
    @include media($small-screen) {
      @include padding(0 null null 0);
      /* stylelint-disable declaration-block-no-ignored-properties */
      display: inline;
      height: auto;
      margin-left: 3px;
      position: relative;
      vertical-align: middle;
      width: auto;
      /* stylelint-enable */
    }
  
    &:hover {
      color: $color-primary-darker;
      text-decoration: underline;
    }
  
    &[aria-expanded=false] {
      @include display-icon(angle-arrow-down-primary, after, scale-rem(1rem), 0, hover);
      background-image: none;
  
      &::after {
        background-position-y: 1px;
      }
    }
  
    &[aria-expanded=true] {
      @include display-icon(close, after, scale-rem(1.3rem), 0, no-hover);
      background-image: none;
      height: scale-rem(5.6rem);
  
      @include media($small-screen) {
        @include display-icon(angle-arrow-up-primary, after, scale-rem(1rem), 0, hover);
        height: initial;
        padding: 0;
        position: relative;
  
        &::after {
          background-position-y: 1px;
        }
      }
  
      &::after {
        position: absolute;
        right: scale-rem(1.5rem);
        top: scale-rem(2.15rem);
  
        @include media($small-screen) {
          position: static;
        }
      }
  
      .usa-banner-button-text {
        display: none;
  
        @include media($small-screen) {
          display: inline;
        }
      }
    }
  }
  
  .usa-banner-icon {
    width: 38px;
  }