@import '../base/variables';
@import '../mixins/grid-framework';
@import '../mixins/breakpoints';
@import '../mixins/transition';
@import '../mixins/type';

#menu-panel .panel {
  max-width: calc(100% - 3.5rem); // Don't open past the brand block logo
}

.a11y-skip-link-container {
  position: relative;
  background-color: $light-gray;
  min-height: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;

  .a11y-skip-link {
    color: $primary;
    font-size: 0.875rem;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;

    &:focus {
      position: relative;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      padding: 0.625rem;
      margin-left: auto;
      margin-right: auto;
      outline: none;
      box-shadow: inset 0 0 0 2px $secondary;
    }
  }

  // Adding the bottom line
  &::after {
    content: " ";
    display: block;
    height: 1px;
    width: 100%;
    margin-top: -1px;
    background: $light-gray;
  }
}

/**
*  Header CSS
*/
.header {
  display: flex;
  align-items: center;
  box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.05);
  height: $header-height;
  background: $white;
  z-index: $header-index;
  position: relative;
  width: 100%;

  @include media-breakpoint-down(lg) {
    height: $header-height-mb;
  }

  &.sticky {
    width:100%;
  }

  &.open {
    box-shadow: none;
  }

  &.closed{}

  &__home-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;

    &:focus {
      outline:none;
      box-shadow: 0 0 0 2px $primary;
    }
  }

  &__logo {
    height: $header-height;
    width: $header-height;
    padding: 0;
    margin-right:1.5rem;
    min-width: $header-height;

     @include media-breakpoint-down(lg) {
      height: 3.5rem;
      width: 3.5rem;
      min-width: 3.5rem;
      margin-right:1rem;
    }
  }

  &__title {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    padding-right: 1rem;

    &-application {
      @include section-title;
      @include media-breakpoint-down(lg){
        font-size: $font-size-base;
        line-height: $line-height-sm;
      }
    }

    &-department {
      @include text-type(6);
      @include media-breakpoint-down(lg) {
        display: none;
      }
    }
  }

  &__menu {
    margin-left: auto;
    display:flex;
    height: 100%;
    align-items: center;
    
    &-inline{
      display: flex;
      height: 100%;
    }

    &-button-container {
      border-left: 1px solid $border-color;
      display:block;

      @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
          $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
      
          &__display#{$infix} {
            display: none !important;
          }
        }      
      }
    }

    &-button {
      font-size: 1.5rem;
      padding: 1.75rem;
      background: transparent;
      border: none;
      height: $header-height;
      color: $black;

      @include media-breakpoint-down(lg) {
        height: 3.5rem;
        width: 3.5rem;
        padding: 1rem;
        font-size: 1.5rem;
      }

      @media (hover: hover) {
        &:hover {
          background: $smoke;
          cursor: pointer;
        } 
      }
     

      &:focus-visible {
        outline: none;
        box-shadow: inset 0px 0px 0px 2px $primary;
        background-color: $smoke;
        cursor: pointer;
      }
    }
  }
}

// Override default panel styles to remove padding
#menu-panel {
  &::part(content) {
    padding: 0;
  }

  .scrolling {
    outline: none;
  }
}