// Partials / Notice

.notice.banner ~ .nav-header{
  position:relative;
}

.notice.banner{
  position:relative;
  z-index:10;
  background-color:$blue;
  background:linear-gradient(90deg, $notice-blue-left 0%, $notice-blue-right 100%);

  .content{
    text-align:center;
    color:$white;
    font-size:13px;
    line-height:17px;
    font-weight:400;
    letter-spacing:0.25px;
    padding:15px;
    max-width:$desktop-block-content-max-width;
    margin-left:auto;
    margin-right:auto;

    a{
      cursor:pointer;
      color:$white;
    }
  }

  button.dismiss{
    cursor:pointer;
    position:absolute;
    top:12px;
    right:10px;
    display:inline-flex;
    align-items:center;
    appearance:none;
    background-color:transparent;
    border:none;
    margin:0;
    padding:0;
    color:$blue-light;

    &:focus{
      outline:0;
    }

    &:hover{
      .close{
        &:before,
        &:after{
          background-color:$white;
        }
      }
    }

    .text{
      display:inline-block;
      margin-right:16px;
    }

    .close{
      position:relative;
      display:block;
      width:20px;
      height:20px;

      &:before,
      &:after{
        content:'';
        transform-origin:center;
        display:block;
        position:absolute;
        width:20px;
        height:20px;
        width:2px;
        height:20px;
        border-radius:1px;
        background-color:$blue-light;
      }

      &:before{
        transform:rotate(-45deg);
      }

      &:after{
        transform:rotate(45deg);
      }
    }
  }
}

@include breakpoint($tablet-landscape){
  .notice.banner{
    display:flex;
    justify-content:space-between;

    .content{
      flex-grow:1;
      max-width:100%;
      text-align:left;
      width:auto;
    }

    button.dismiss{
      position:relative;
      left:auto;
      top:auto;
      right:auto;
      flex-grow:0;
      padding-left:20px;
      padding-right:5px;
    }
  }
}

@include breakpoint($tablet-portrait){
  .notice.banner{
    .content{
      text-align:left;
    }
  }
}

@include breakpoint($phone){
  .quick-nav + .notice.banner{
    margin-right:54px;
  }

  .notice.banner{
    align-items:flex-start;

    button.dismiss{
      top:14px;
      padding-left:5px;
      
      .text{
        display:none;
      }
    }
  }
}
