/*
 * 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 {
  --#{$prefix}link-decoration-opacity: 0;
  @include box-shadow(0 4px 6px -5px rgba(0, 0, 0, .3));
  background-color: $white;
  border-top: 1px solid $gray-100;

  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
}

.uoe-nav-link {
  display: block;
  padding: 8px 15px;
  @include font-size($font-size-sm);
  font-weight: $font-weight-semibold;
  --#{$prefix}link-color-rgb: #{to-rgb($gray-700)};
  --#{$prefix}link-hover-color-rgb: #{to-rgb($gray-900)};
  &:active,
  &:focus-visible,
  &:hover {
    background-color: $gray-100;
  }

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

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

.uoe-nav-link-ancestor {
  --#{$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;
  background-color: $gray-100;
  border-bottom: 1px solid $gray-300;

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

.uoe-nav-link-ancestor,
.uoe-nav-link-expanded,
.uoe-nav-link-collapsed {
  display: flex;
  &::after {
    flex-shrink: 0;
    width: 2em;
    height: 1.15em;
    margin-top: .2rem;
    margin-left: auto;
    content: "";
    background-repeat: no-repeat;
    background-position: 100% 50%;
  }
}

.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);
}

.uoe-nav-link-empty::after {
  background-image: none;
}

.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: 10px 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: 10px;
}

.uoe-nav-link-child {
  padding: 15px;
  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)};
  background-color: $brand-color;
  &:active,
  &:focus-visible,
  &:hover {
    background-color: $brand-hover;
  }
}

@include media-breakpoint-up(md) {
  .edgel-js {
    .uoe-nav ul {
      display: block;
    }

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