/* ==========================================================================
   Nav main.
   ========================================================================== */
.nav--main {
  .nav-menu {
    &.level-3 {
      position: absolute;
      z-index: -1;
      top: -10px;
      left: 264px;
      display: block;
      width: 264px;
      padding: 10px 0;
      background-color: var(--color-bg);
      border: 0;
      visibility: hidden;
      opacity: 0;
      box-shadow: var(--box-shadow-s);
      box-sizing: border-box;
      transition: .3s;

      .nav-item > span {
        display: block;
        padding: 10px 20px 0;
        color: var(--color-fg-primary);
        font-family: inherit;
        font-size: var(--font-size-m);
        font-weight: 500;
      }
    }

    &.level-4 {
      position: static;

      a {
        padding: 10px 20px 0;
        color: var(--color-fg-primary);
        font-family: inherit;
        font-size: var(--font-size-m);
        font-weight: normal;

        &:before {
          content: "-";
          margin-right: 10px;
        }

        &:hover,
        &:focus {
          color: var(--color-text-dark);
        }
      }
    }
  }

  .nav-item {
    &.level-1 {
      > a {
        padding: 0;
        text-transform: none;

        span {
          padding: var(--space-s) var(--space-m);
          transition: .3s;

          &:after {
            content: none;
          }
        }
      }

      &.is-active-trail > a span {
        border-bottom: 2px solid var(--color-fg-tertiary);
      }

      &.is-active > a,
      > a:hover,
      > a:focus {
        span {
          color: var(--color-fg-primary);
          background-color: var(--color-fg-tertiary);
        }
      }
    }

    &.level-2,
    &.level-3 {
      > a {
        font-family: var(--font-family);
        font-weight: bold;
      }

      &.is-parent {
        position: relative;

        > a {
          &:before,
          &:after {
            content: "";
            position: absolute;
            top: 44%;
            right: var(--space-m);
            transform: translateY(-50%) rotate(45deg);
            width: 8px;
            height: 2px;
            background: var(--color-fg-primary);
          }

          &:after {
            top: 56%;
            transform: translateY(-50%) rotate(-45deg);
          }
        }
      }

      &.is-active {
        .nav-menu {
          z-index: 100;
          visibility: visible;
          opacity: 1;
        }
      }
    }
    &.level-3 {
      > a {
        color: var(--color-primary);
      }
    }
  }
}

/* Non-Admin.
   ========================================================================== */
body:not(.role--admin) .nav--main .visible-only-admin {
  display: none;
}

/* ==========================================================================
   Nav dropdown.
   ========================================================================== */
.nav--dropdown {
  .l-banner & {
    .nav-toggle {
      .icon {
        color: var(--color-fg-tertiary);
        border: 2px solid transparent;

        &:before {
          background-color: var(--color-fg-tertiary);
        }
      }
    }

    &.is-open .nav-toggle,
    .nav-toggle:hover,
    .nav-toggle:focus {
      .icon {
        color: var(--color-fg-tertiary);
        background: var(--color-fg-primary);
        border-color: var(--color-fg-tertiary);
      }
    }
  }
}

/* ==========================================================================
   Nav breadcrumb.
   ========================================================================== */
.nav--breadcrumb {
  display: none;
}

/* ==========================================================================
   Nav simple.
   ========================================================================== */
.nav--simple {
  .nav-item {
    a {
      padding: var(--space-l);
      color: var(--color-white);
      background-color: var(--color-fg-primary);

      &:hover,
      &:focus {
        color: var(--color-fg-primary);
        background-color: var(--color-fg-tertiary);

        .icon:before {
          background-color: var(--color-fg-primary);
        }
      }
    }
    .icon:before {
      background-color: var(--color-white);
    }
  }

  /* Responsive.
     ========================================================================== */
  @media screen and (min-width: 48em) {
    .nav-menu {
      margin-left: -1.5%;
      margin-right: -1.5%;
    }

    .nav-item {
      padding: 0 1.5%;
      width: 22%;
    }
  }
}

/* ==========================================================================
   Nav detailed.
   ========================================================================== */
.nav--detail {
  background: var(--color-bg);

  .nav-menu .nav-menu:after {
    background: none;
  }

  .nav-item {
    > a {
      background: none;
    }

    &.is-active-trail > a,
    > a:hover,
    > a:focus,
    > a.is-active {
      color: var(--color-fg-primary);
      background-color: var(--color-fg-tertiary);
    }

    &.level-1 {
      > a {
        padding-top: var(--space-m);
        padding-bottom: var(--space-m);
        color: var(--color-white);
        background-color: var(--color-fg-primary);

        &:hover,
        &:focus,
        &.is-active {
          color: var(--color-fg-primary);
          background-color: var(--color-fg-tertiary);

          .icon:before {
            background-color: var(--color-fg-primary);
          }
        }
      }

      + .nav-item.level-1 {
        margin-top: var(--space-s);
        border: 0;
      }

      .icon {
        display: block;
        --icon-size: var(--icon-size-m);

        &:before {
          background-color: var(--color-white);
        }
      }

      &.is-parent:not(.is-active-trail) {
        > .nav-menu {
          display: none;
        }
      }

      &.is-active,
      &.is-active-trail {
        background-color: var(--color-fg-tertiary-light);

        > a {
          color: var(--color-fg-primary);
          background-color: var(--color-fg-tertiary);

          .icon:before {
            background-color:  var(--color-fg-primary);
          }
        }
      }
    }

    &.level-2 {
      > span {
        display: block;
        padding: var(--space-xs) var(--space-l);

        .item-title {
          color: var(--color-fg-primary);
        }
      }
    }

    &.level-3 {
      .item-title {
        font-weight: normal;
      }
    }
  }
}


/* ==========================================================================
   Nav sidear.
   ========================================================================== */
.nav-sidebar-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.nav-menu-home {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23213b50' d='M20 20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9H1l10.33-9.39a1 1 0 0 1 1.34 0L23 11h-3v9Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  background-size: cover;
}