/*
 * EdGEL content navigation menu
 * --------------------------------------------------
 */
// stylelint-disable font-family-no-missing-generic-family-keyword

/* Top of col-uoe-nav goes to top of page content container */
.col-uoe-nav {
  margin-top: -30px;
  margin-bottom: 30px;
}

/* Trigger button used to expand the menu */
.uoe-nav-trigger {
  display: block;
  background: #fff;
  margin: 0;
  padding: 18px 15px;
  position: relative;
  font-weight: 700;
  font-size: 1em;
  border-bottom: 1px solid #666;
}
.uoe-nav-trigger-button {
  &:before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .glyphicon {
    color: #333;
    font-size: 1.3em;
    font-weight: 400;
    padding-right: 10px;
    vertical-align: sub;
  }
}

/* Left content navigation menu */
.uoe-nav {
  .box-shadow(0 4px 6px -5px rgba(0, 0, 0, 30%));
  border-top: 1px solid #f5f5f5;
  margin: 0;
  padding: 0;
  list-style: none;
  /* No shadow on nested lists */
  .uoe-nav {
    .box-shadow(none);
  }
  .glyphicon {
    color: @brand;
    font-size: 1.25em;
  }
  a:hover .glyphicon {
    color: darken(@brand, 5%);
  }
  ul {
    list-style: none;
    font-size: 1em;
    margin: 0;
    padding: 0;
  }
  /* Default list item settings. */
  li {
    background: #fff;
    > a {
      background: transparent;
      display: block;
      line-height: 1.2em;
      font-size: .95em;
      font-weight: 600;
      color: #555;
      &:hover,
      &:focus {
        background: #fafafa;
        color: #111;
      }
    }
    /* Grandchildren have a red left border and smaller padding */
    li {
      ul {
        padding: 10px 0;
      }
      li {
        > a {
          border-bottom: none;
          margin-left: 1em;
          padding: 10px 15px;
          font-size: .879em;
          border-left: 1px solid @brand;
        }
      }
    }
  }

  /* Group page list item */
  > li {
    > a {
      border-bottom: 1px solid #ccc;
      padding: 20px 15px;
    }
    &.uoe-nav-expanded > a {
      margin: 0;
      color: #555;
      &:hover,
      &:focus {
        color: #111;
      }
      border-bottom: 1px solid #ccc;
    }
    > ul {
      padding: 0;
      /* Immediate children of the group list item */
      > li {
        > a {
          padding: 15px;
          border-bottom: 1px solid #ccc;
        }
      }
      > .uoe-nav-expanded > a {
        margin: 0;
      }
    }
  }

  /* Expanded list item */
  .uoe-nav-expanded > a {
    margin: 10px 0 0;
    font-size: .95em;
    border-style: none;
    color: @brand-as-link;
    &:hover,
    &:focus {
      color: @brand-as-link-hover;
    }
  }

  /* Active list item */
  .uoe-nav-active > a,
  .uoe-nav-expanded.uoe-nav-active > a {
    background: @brand;

    &,
    .glyphicon {
      color: @brand-bg-text;
    }
    &:hover,
    &:focus {
      background: darken(@brand, 5%);
      &,
      .glyphicon {
        color: @brand-bg-text;
      }
    }
  }

  /* Ancestors of the expanded list item */
  .uoe-nav-ancestor {
    margin: 0;

    > a {
      position: relative;
      background: #fafafa;
      border-bottom: 1px solid #ddd;
      border-left-style: none;
      font-size: .85em;
      font-weight: 400;
      margin: 0;
      opacity: .9;
      padding: 10px 15px;
      color: #555;
      &:hover,
      &:focus {
        color: #111;
      }

      &:before {
        /* Add a chevron-up glyphicon to the ancestor link */
        position: absolute;
        top: 11px;
        right: 15px;
        white-space: nowrap;
        overflow: hidden;
        font-family: "Glyphicons Halflings";
        content: "\e113";
        color: @brand;
        font-size: 1.25em;
        z-index: 1;
      }
    }
    > ul {
      padding: 0;
    }
  }
}

@media screen and (min-width: @screen-sm-min) {
  .js {
    .uoe-nav {
      display: block;
    }
    .uoe-nav-trigger {
      display: none;
    }
  }
}

@media screen and (max-width: (@screen-xs-max)) {
  .navbar-default .navbar-collapse {
    max-height: 600px;
  }
}

/* Marking secure links */
a .glyphicon-lock {
  font-size: 80%;
  padding-left: .5em;
}

// stylelint-enable
