/* move to nav module - ////////////////////////////////////////////////////////////////////////////////////////// PAGE - Nav Primary */
.nav-primary--list {
  margin-top: 0;

  &.lvl-0 {
    position: absolute;
    min-width: 32ch;
  }
}

.nav.nav-primary--list.primary {
  --bs-nav-link-font-weight: 800;
  --bs-nav-link-font-size: var(--fs-h6);
  --bs-nav-link-color: var(--bs-primary);
  --bs-nav-link-padding-x: var(--spacing-xs);
  
  text-transform: uppercase;
}

.header-nav--listitem.social {
  .nav.social-nav {
    --bs-nav-link-color: var(--bs-white);
    --bs-nav-link-hover-color: var(--bs-tertiary);
  }
}

.nav.nav-primary--list.utility {
  --bs-nav-link-color: var(--bs-white);
  --bs-nav-link-font-weight: 800;

  --bs-nav-link-font-size: var(--fs-h6);
}


.nav-primary--list .list-group-item.active {
  --bs-list-group-active-bg: rgba( var(--bs-tertiary-rgb), 0.25);
  --bs-list-group-active-border-color: var(--bs-primary);
  
  text-shadow: 2px 2px 0 var(--bs-primary);
}

.nav-primary--listitem {
  &.lvl-0.active {
    border-bottom: 4px solid rgba(var(--bs-tertiary-rgb), 0.5);
  }

  &.lvl-0 {
    &.dropdown {

      .list-group.nav-primary--list {
        --bs-list-group-bg: var(--bs-primary);
        --bs-list-group-border-color: var(--bs-primary);
        --bs-list-group-color: var(--bs-white);
        --bs-list-group-action-hover-bg: rgba(var(--bs-tertiary-rgb), 0.5);
        --bs-list-group-action-hover-color: var(--bs-white);
        --bs-list-group-action-active-bg: var(--bs-tertiary);

        background-color: var(--bs-primary);

        transition: 280ms all ease-out;
        top: calc(100% - .25rem);
        left: 50%;
        transform: translateX(-50%);
        transform: rotateX(90deg) translateX(-50%);
        transform-origin: top center;
        opacity: 0.3;
        visibility: hidden;
        height: 0;
        z-index: 9000;
      }

      .dropdown-toggle:after {
        margin-left: 0;
      }

      &:last-of-type {
        .list-group.nav-primary--list {
          transform: rotateX(0) translateX(-75%);
        }
      }

      &:hover,
      &:focus-within {
        .nav-link.lvl-0 {
          cursor: pointer;
        }

        .nav-list.nav-primary--list {
          opacity: 1;
          height: auto;
          transform: rotateX(0) translateX(-50%);
          visibility: visible;
        }

        &:last-of-type {
          .nav-list.nav-primary--list {
            transform: rotateX(0) translateX(-75%);
          }
        }
      }
    }
  }

  &.lvl-1 {
    text-align: left;
  }
}