/*
 * Core styles for PriorityNav.js
 * These styles are not optional and should always be included
 *
 * Free to use under the MIT License.
 * http://twitter.com/GijsRoge
 */
.cp-header__navigation .priority-nav {
    white-space: nowrap;
    /*
        * Makes sure the menu's are inline-block so they don't take up
        * the entire width of its parent. This will break the plugin.
        */
    &__dropdown {
      position: fixed;
      z-index: 999999;
      visibility: hidden;
      top: 0;
      right: -320px;
      height: 100%;
      background: var(--navPrimaryBgColour);
      width: 320px;
      height: 100%;
      transition: right 0.3s ease;
      padding: 40px 25px 20px;
      margin: 0;
      overflow-y: scroll;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start;
      list-style: none;
      box-shadow: 0px 0px 2px 1px rgba(0,0,0,.2);
      &:before, &:after {
        content: '';
        position: absolute;
        top: 25px;
        right: 25px;
        width: 20px;
        height: 2px;
        background-color: var(--navTextColour); /* Adjust color as needed */
        z-index: 10;
        cursor: pointer;
        transform-origin: center;      
      }
      &:before {
        transform: rotate(45deg);
      }
      &:after {
        transform: rotate(-45deg);
      }      
      .logged-in & {
        top: 32px;
      }
      .customize-partial-edit-shortcuts-shown & {
        top:0!important;
      }
      @media screen and (max-width: 782px) {
        .logged-in & {
          top: 46px;
        }      
      }
      @include mq(tablet, max) {
        width: 300px;
      }
      &.show {
        right: 0;
        visibility: visible;
      }
      li {
        list-style-type: none;
        display: block;
        vertical-align: middle;
        text-align: left;
        white-space: normal;
        a {
          text-decoration: none;
          line-height: 20px;
          padding: 12px 0;
          display: inline-block;
          &:before {
            position: absolute;
            bottom: 0px;
            left:0;
          }
        }   
        ul {
          padding-left: 10px;
        } 
      }
    }
}
  
  .priority-nav-has-dropdown .priority-nav__dropdown-toggle {
    display: inline-block;
    position: relative;
    cursor: pointer;
    color: #000;
    background: none;
    border: none;    
    color: var(--navTextColour);
    text-decoration: none;
    height: 62px;
  }
  
  .priority-nav__wrapper {
    position: relative;
    padding-left: 20px;
  }
  
  .priority-nav__dropdown.show {
    visibility: visible;
  }
  
  .priority-nav__dropdown-toggle {
    visibility: hidden;
    position: absolute;
    .l-reverse & {
      border-left: 5px dotted var(--navPrimaryBgColour);
    }
    .l-normal & {
      border-right: 5px dotted var(--navPrimaryBgColour);
    }  
  }
  
  .priority-nav-is-visible {
    visibility: visible;
  }
  
  .priority-nav-is-hidden {
    visibility: hidden;
  }