/*
 * EdGEL content navigation menu
 * --------------------------------------------------
 */

@use "../settings" as *;
@use "../tools" as *;

/* Toggler button used to expand the menu */
.btn-uoe-nav-toggler {
  @include edgel-button-variant($gray-600, $white);
  --#{$prefix}btn-hover-bg: #{$white};
  --#{$prefix}btn-active-bg: #{$white};
  width: 100%;
}

/* Left content navigation menu */
.uoe-nav,
.uoe-nav-secondary {
  @include box-shadow(0 4px 6px -5px rgba(0, 0, 0, .3));
  background-color: $white;
  border-top: 1px solid $gray-100;
  --_menu-depth: -1;

  ul {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    padding: 0;
    margin: 0;
    list-style-type: none;
    --_parent-menu-depth: var(--_menu-depth);
  }

  li {
    display: grid;
    grid-template-columns: 1fr 2.5rem;
    // stylelint-disable-next-line function-disallowed-list
    --_menu-depth: calc(var(--_parent-menu-depth) + 1);
  }
}

.uoe-nav-secondary {
  float: left;
  // stylelint-disable-next-line function-disallowed-list
  width: calc(25% - $grid-gutter-width / 2);
  margin: $main-content-spacer ($grid-gutter-width / 2) 0 0;
}

.uoe-nav-combined + * {
  // stylelint-disable-next-line function-disallowed-list
  margin-left: calc(25% + $grid-gutter-width / 2);
}

.uoe-nav-link {
  position: relative;
  display: block;
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  padding: edgel-px-rem(8) edgel-px-rem(15);
  @include font-size($font-size-sm);
  font-weight: $font-weight-semibold;
  @include edgel-focus-outline();
  --#{$prefix}link-color-rgb: #{to-rgb($gray-700)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($gray-900)};
  --#{$prefix}link-decoration-opacity: 0;
  &:active,
  &:focus-visible,
  &:hover {
    background-color: $gray-100;
  }
}

.uoe-nav-link-root {
  padding: edgel-px-rem(17) edgel-px-rem(15);
  border-bottom: 1px solid $gray-400;
}

.uoe-nav-link-ancestor,
.uoe-nav-link-expanded,
.uoe-nav-link-collapsed {
  display: flex;
  &::after {
    flex-shrink: 0;
    width: 1.2em;
    margin-left: auto;
    content: "";
    background: no-repeat 100% 60% none;
  }
}

.uoe-nav-link-ancestor,
.uoe-nav-link-tree {
  --#{$prefix}link-color-rgb: #{to-rgb($gray-700)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($gray-900)};
  @include font-size($font-size-sm * .9);
  font-weight: 400;
  border-bottom: 1px solid $gray-300;

  &::after {
    background-image: escape-svg($uoe-nav-ancestor-icon);
  }
}

.uoe-nav-link-ancestor {
  background-color: $gray-100;
}

.uoe-nav-link-tree {
  --_menu-link-flash-colour: transparent;
  // stylelint-disable-next-line function-disallowed-list
  padding-left: calc(#{edgel-px-rem(15)} + var(--_menu-depth, 0) * #{space(2)});

  &::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    // stylelint-disable-next-line function-disallowed-list
    width: calc(#{edgel-px-rem(8)} + #{space(2)});
    content: "";
    border-right: 1px solid var(--_menu-link-flash-colour);
  }

  &:active,
  &:focus,
  &:hover {
    --_menu-link-flash-colour: #{$brand-color};
    background-color: $gray-100;
  }
}

.uoe-nav-link-active ~ ul .uoe-nav-link-tree {
  background-color: $gray-200;
  &:active,
  &:focus,
  &:hover {
    background-color: $gray-300;
  }
}

.btn-uoe-nav-link {
  --#{$prefix}btn-hover-bg: rgba(#{to-rgb($brand-color)}, .15);
  --#{$prefix}btn-hover-border-color: #{$brand-color};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($brand-color)};
  --#{$prefix}btn-focus-border-color: #{$brand-as-link};
  --#{$prefix}btn-active-bg: rgba(#{to-rgb($brand-color)}, .25);
  --#{$prefix}btn-active-border-color: #{$brand-color};
  --#{$prefix}btn-active-shadow: 0 0 0 #{$btn-focus-width} rgba(#{to-rgb($brand-color)}, .5);

  z-index: 1;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.uoe-nav-link-active + .btn-uoe-nav-link {
  --#{$prefix}btn-focus-border-color: #{$brand-bg-text};
}

.uoe-nav-link-expanded::after {
  background-image: escape-svg($uoe-nav-expanded-icon);
  @at-root .uoe-nav-link-active#{&} {
    background-image: escape-svg($uoe-nav-expanded-icon-active);
  }
}

.uoe-nav-link-collapsed::after {
  background-image: escape-svg($uoe-nav-collapsed-icon);
  @at-root .uoe-nav-link-active#{&} {
    background-image: escape-svg($uoe-nav-collapsed-icon-active);
  }
}

.uoe-nav-link-leaf {
  @include margin-left(space(2));
  @include font-size($font-size-sm * .92);
  border-left: 1px solid $brand-color;
}

.uoe-nav-link-joint {
  margin: edgel-px-rem(10) 0;
  --#{$prefix}link-color-rgb: #{to-rgb($brand-as-link)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($brand-as-link-hover)};
}

.uoe-nav-link-joint ~ ul {
  padding-bottom: edgel-px-rem(10);
}

.uoe-nav-link-child {
  padding: edgel-px-rem(15);
  margin-top: 0;

  &:not(.uoe-nav-link-joint) {
    border-bottom: 1px solid $gray-400;
  }
}

.uoe-nav-link-active {
  --#{$prefix}link-color-rgb: #{to-rgb($brand-bg-text)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($brand-bg-text)};
  --#{$prefix}link-focus-ring-rgb: #{to-rgb($brand-color)};
  background-color: $brand-color;
  &:active,
  &:focus-visible,
  &:hover {
    --_menu-link-flash-colour: transparent;
    background-color: $brand-hover;
  }
}

.uoe-nav-primary {
  --#{$prefix}link-color-rgb: #{to-rgb($body-color)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($body-color)};

  background: $white;
  border-bottom: 1px solid $gray-500;

  .nav-link {
    --#{$prefix}nav-link-hover-color: #{$body-color};
    --#{$prefix}nav-link-padding-y: #{calc($grid-gutter-height / 2)};
    border-bottom: 4px solid transparent;

    &.active,
    &.show,
    &:hover {
      text-decoration: none;
      background-color: $gray-100;
      border-bottom-color: $brand-color;
    }
  }

  &,
  .dropdown-menu {
    @include edgel-container();
  }
}

.uoe-nav-link-section {
  --#{$prefix}link-color-rgb: #{to-rgb($brand-as-link)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($brand-as-link-hover)};
  --#{$prefix}link-decoration-opacity: 0;
  display: inline-flex;
  margin: #{calc($grid-gutter-width / 2)};
  @include font-size(1.3rem);
  font-weight: $font-weight-semibold;

  &::after {
    flex-grow: 0;
    width: 1.5em;
    content: "";
    background: no-repeat 100% 50% / 70% escape-svg($uoe-nav-collapsed-icon);
  }
}

.uoe-nav-dropdown-links {
  display: flex;
  flex-wrap: wrap;
  padding: 0 #{calc($grid-gutter-width / 2)};
  list-style: none;

  > * {
    flex: 0 0 auto;
    width: 50%;
    margin-bottom: space(5);
  }
}

.uoe-nav-link-dropdown {
  --#{$prefix}link-decoration-opacity: 0;
  display: block;
  padding: #{space(1)} #{calc($grid-gutter-width / 2)};
  @include font-size(1.15rem);
  font-weight: $font-weight-semibold;
  border-left: 2px solid $gray-300;

  .active,
  &:hover {
    --#{$prefix}link-color-rgb: to-rgb($body-color);
    background-color: $gray-100;
    border-left-color: $brand-color;
  }
}

@include media-breakpoint-up(md) {
  .uoe-nav-dropdown-links > * {
    width: 25%;
  }

  .edgel-js {
    .uoe-nav > ul {
      display: block;
    }

    .btn-uoe-nav-toggler {
      display: none;
    }
  }
}

[class^="uoe-nav-link"],
[class*=" uoe-nav-link"] {
  .bi,
  [class^="bi-"],
  [class*=" bi-"],
  .icon {
    margin-left: .6em;
  }
}

// Support for combined menu-combined custom element.
[has-secondary] + .container-content > * {
  // stylelint-disable-next-line function-disallowed-list
  margin-left: calc(25% + $grid-gutter-width / 2);
}