$navigation-font-size: 16px !default;
$navigation-font-weight: 400 !default;
$navigation-color: $link-color !default;
$navigation-icon-size: 20px !default;
$navigation-icon-color: $dark-gray-3 !default;
$navigation-menu-height: 36px !default;
$navigation-indicator-color: $primary !default;
$navigation-width: 16rem !default;

.navigation {
  display: block;
  width: 100%;

  ul {
    margin: 0;
  }

  &.navigation--expanded {
    min-width: $navigation-width;
    width: 100%;
  }

  ul.navigation__items, ul.navigation__menu {
    list-style: none;
  }

  .navigation__link, .navigation__sub-menu {
    display: flex;
    align-items: center;
    position: relative;
    height: $navigation-menu-height;
    padding: 0 $spacing-md;
    width: 100%;
    font-size: $navigation-font-size;
    font-weight: $navigation-font-weight;
    color: $navigation-color;

    &:hover {
      color: $dark;
      text-decoration: none;
      background: $light-gray-2;
    }
  }

  .navigation__icon {
    margin-right: $spacing-lg;
    font-size: $navigation-icon-size;
    color: $navigation-icon-color;
    line-height: 1;
  }

  suka-navigation-item + suka-navigation-item,
  suka-navigation-item + suka-navigation-menu,
  suka-navigation-menu + suka-navigation-menu,
  suka-navigation-menu + suka-navigation-item {
    .navigation__link, .navigation__sub-menu {
       margin-top: $spacing-sm;
    }
  }

  .navigation__link[aria-current='page'] {
    .navigation__icon {
      color: $navigation-indicator-color;
    }

    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 1px;
      width: 3px;
      background-color: $navigation-indicator-color;
    }
  }

  .navigation__sub-menu {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    outline: none;
    border: 0;

    .navigation__sub-menu-icon {
      margin-left: auto;
      transition: transform .2s ease;
    }
  }

  .navigation__menu-item {
    .navigation__link {
      padding-left: calc(#{$spacing-md} + #{$navigation-icon-size} + #{$spacing-lg});
    }
  }

  .navigation__spacer {
    display: block;
    height: $spacing-lg;
    width: 100%;
  }

  .navigation__menu {
    opacity: 0;
    transition: max-height .2s ease, opacity .1s ease;
    overflow: hidden;
  }

  .navigation__sub-menu[aria-expanded='true'] {
    .navigation__sub-menu-icon {
      transform: rotate(180deg);
    }

    + .navigation__menu {
      opacity: 1;
    }
  }
}

.mobile-navigation {
  display: flex;
  align-items: center;
  // position: fixed;
  // bottom: 0;
  // left: 0;
  // right: 0;
  width: 100vw;
  padding: 0 $spacing-md;
  height: 56px;
  z-index: 999;
  border-top: 1px solid $light-gray-2;
  background: $light;

  .backdrop--dark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all .15s ease;
    opacity: 0;
    transform: translateY(-100%);
  }

  .mobile-navigation__nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow-y: auto;
    transition: transform .3s ease;
    transform: translateY(100%);

    .navigation__link, .navigation__sub-menu {
      height: 56px;
    }

    .mobile-nav-trigger {
      height: 50vh;
      width: 100%;
    }

    .mobile-nav {
      background: $light;
      // z-index: 11;
      padding-bottom: 2rem;
      transition: transform .2s ease;
      transform: translateY(50%);
      min-height: 100vh;

      .mobile-nav__header {
        position: sticky;
        top: 0;
        display: flex;
        padding: $spacing-md;
        background: $light;
        z-index: 11;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        border-bottom: 1px solid $light-gray-2;
      }
    }
  }

  &.mobile-navigation--expanded {
    .mobile-navigation__nav-wrapper {
      transform: translateY(0);
      z-index: 999;
    }

    .backdrop--dark {
      transform: translateY(0);
      opacity: 1;
      z-index: 1;
    }

    .mobile-nav {
      transform: translateY(0%);
    }
  }

  .nav-toggle {
    background: none;
    color: $primary;
    height: 100%;
    border: none;
    outline: none;
    padding: 0;

    &:active {
      background: $light-gray-2;
    }
  }
}