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

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

/* Toggler button used to expand the menu */
.btn-uoe-nav-toggler {
  @include button-variant($white, $gray-600);
  width: 100%;
  text-align: left;
}

/* Left content navigation menu */
.uoe-nav {
  @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-icon {
  float: right;
  @include font-size(17.5px);
  fill: $brand-color;
}

.uoe-nav-link {
  display: block;
  padding: 10px 15px;
  @include font-size(17.5px);
  font-weight: 600;
  line-height: 1.2;
  color: $gray-700;
  text-decoration: none;
  &:active,
  &:focus,
  &:hover {
    color: $gray-900;
    background-color: $gray-100;
  }
}

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

.uoe-nav-link-ancestor {
  @include font-size(15.6px);
  display: flex;
  font-weight: 400;
  color: $gray-700;
  background-color: $gray-100;
  border-bottom: 1px solid $gray-300;
  &:active,
  &:focus,
  &:hover {
    color: $gray-900;
  }
  &::after {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    margin-left: auto;
    content: "";
    background-image: escape-svg($uoe-nav-ancestor-icon);
    background-repeat: no-repeat;
    background-position: 50%;
  }
}

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

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

.uoe-nav-link-joint {
  margin: 10px 0;
  color: $brand-as-link;
  &:active,
  &:focus,
  &:hover {
    color: $brand-as-link-hover;
  }
}

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

.uoe-nav-link-active {
  color: $brand-bg-text;
  background-color: $brand-color;
  &:active,
  &:focus,
  &:hover {
    color: $brand-bg-text;
    background-color: $brand-hover;
  }
}

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

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