/* -----------------------------------------
   HEADER
   /src/styles/components/header.scss
----------------------------------------- */
header.global-header{
  position: sticky;
  top: 0;
  background-color: var(--bs-white, $white);
  z-index: 15;
  transition: all 0.3s ease;
  width: 100%;

  #skip-to-content {
    position: relative;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 999;
  
    a {
      width: 1px; // > 0px Needed for Safar
      height: 1px; // > 0px Needed for Safar
      text-align: center;
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%);
      clip: unset;
      background-color: white;
      border-radius: 0 0 7px 7px;
      overflow: hidden;
  
      &:focus {
        width: 160px;
        height: 27px;
      }
    }
  }

  &::after{
    /*content: "";
    background-color: rgba(0,0,0,.48);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh + 100px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;*/
  }
  
  &.overlay::after{
      opacity: 1;
      visibility: visible;
  }

  .mobile-control{
      background: transparent;
      border: none;
      color: var(--bs-main, $main);

      &:focus,
      &:focus-visible{
          @include outline(2px);
      }

      &.toggle-menu{
          margin-left: auto;
          display: none;
      }

      &.ca-gov-icon-close-mark{
          color: var(--bs-white, $white);
      }
  }

  .mobile-controlled.overlay{
      top: 0;
      height: 100%;
      text-align: right;
  }
}
