$transition: var(--transition-speed-slow) var(--transition-animation-type);
$navbar-height: 3rem;

.navbar {
  z-index: 9990;
  aside[role="dialog"] {
    position: fixed;
    transition: background var(--transition-speed-slow);
  }

  nav {
    svg[aria-label="close"] {
      opacity: 1;
    }

    @media(min-width: $tablet) {
      svg[aria-label="close"],
      svg[aria-label="open"] {
        display: none;
      }

      &:not(.right) {
        ul {
          padding-left: 1rem;
        }
      }
    }

    ul {
      display: flex;
      list-style: none;
      margin: .25rem;

      li {
        margin: 1rem;
        cursor: pointer;
        a {
          text-decoration: none;
          font-weight: bold;
          text-transform: uppercase;
          transition: border-bottom var(--transition-speed-slow), color var(--transition-speed-slow);

          + span {
            display: block;
            visibility: hidden;
            margin: 0 auto;
            background-color: var(--primary-color);
            height: 0;
            width: 0;
            transition:
              width $transition,
              height $transition,
              visibility $transition,
              margin-bottom $transition,
              background-color $transition;
          }

          &:hover {

            + span {
              width: 100%;
              height: 2px;
              visibility: visible;
              margin-bottom: -2px;
              background-color: var(--primary-color-hover);
            }
          }

          &:active, &:focus {
            + span {
              background-color: var(--primary-color-focus);
            }
          }
        }

        &.default-navbar-active {
          a {
            color: var(--primary-color-focus);
          }
        }
      }
    }
  }

  @media(min-width: $tablet) {
    aside[role="dialog"], section h3 {
      display: none;
    }

    section {
      display: flex;
      align-items: center;
      padding-top: .25rem;
    }


    &[variant*="navbar-right"] section {
      justify-content: space-between;
    }

    section aside img {
      height: $navbar-height;
      margin: 0 0 0 1.5rem;
    }
  }


  @media(max-width: $tablet) {
    display: grid;
    justify-content: left;
    position: absolute;
    left: -70vw;
    transition: left var(--transition-speed-slow);
    min-height: 45px;
    position: fixed;
    top: 0;

    div[role='dialog'] {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      height: $navbar-height;
      background: var(--white-color);
      box-shadow: var(--box-shadow-medium);
    }

    nav {

      svg[aria-label="open"], svg[aria-label="close"] {
        display: block;
        position: fixed;
        left: .75rem;
        top: .75rem;
        color: var(--primary-color);
        width: 1.5rem;
        cursor: pointer;
        margin: 0;
        @include primary-accessible-behavior;
      }

      section {
        background: var(--grey-color-dark);
        width: 70vw;
        height: 100vh;
        padding-top: 1rem;
        padding-left: 0;
        padding-right: 0;
        margin: 0;
        z-index: 9990;
        position: absolute;

        aside {
          display: flex;
          justify-content: center;
          border-bottom: solid var(--border-size) var(--primary-color);
          padding-bottom: 1.15rem;
          margin-bottom: 1rem;

          img {
            max-width: 60%;
            margin: .75rem 0 0;
          }

          a {
            text-align: center;
            img {
              max-width: 70%;
            }
          }
        }

        h3 {
          text-align: center;
          margin: -2px 5px 5px;
          font-weight: bold;
        }

        ul {
          justify-content: flex-start;
          flex-direction: column;
          padding-left: 0;
          padding-right: 0;
          margin: 0;

          li {
            margin: 0;
            padding: 1rem 5rem 1rem 2rem;

            a {
              user-select: none;
              font-size: 1.2rem;
              transition: none;

              + span {
                display: none;
              }
            }

            &:hover {
              background-color: var(--grey-color-medium);
              a {
                color: var(--primary-color-hover);
              }
            }

            &:focus {
              background-color: var(--grey-color-medium);
              a {
                color: var(--primary-color-focus);
              }
            }

          }
        }

      }
    }
  }

  &[variant*="right"] {
    nav {
      ul {
        @media(min-width: $tablet) {
          justify-content: flex-end;
          padding-right: 1rem;
        }
      }
    }
  }

  + div[role="dialog"] {
    height: calc(#{$navbar-height} + .5rem);
  }
}

.navbar-open {
  @extend .navbar;
  touch-action: none;

  @media(max-width: $tablet) { // can't use custom properties in media queries
    position: fixed;
    left: 0;

    aside[role="dialog"] {
      @include mask;
      top: $navbar-height;
    }

    nav {
      display: grid;
      grid-template-columns: 8fr 1fr 1fr;

      section {
        border-right: solid var(--black-color) var(--border-size);
        box-shadow: var(--box-shadow-heavy);
        position: relative;
      }

      @keyframes show {
        from { opacity: 0 }
        to { opacity: 1 }
      }

      svg[aria-label="close"] {
        width: 1.70rem;
        z-index: 9991;
        grid-column-start: 3;
        position: fixed;
        left: unset;
        right: 1rem;
        animation: show var(--transition-speed-slow) 1
      }
    }

  }

  ~ div[class*="to-top"][role="button"] {

    // Hide to-top button if they're using it
    opacity: 0 !important; // !important is here because this style is set in-line on the element
  }
}