/* 
 * Copyright 2011-2025, The Trustees of Indiana University and Northwestern
 *   University.  Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 *   under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 *   CONDITIONS OF ANY KIND, either express or implied. See the License for the
 *   specific language governing permissions and limitations under the License.
 * ---  END LICENSE_HEADER BLOCK  ---
*/

// Copied from bootstrap-sass
$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
$gray-base:              #000 !default;
$gray-lighter:           tint-color($gray-base, 93.5%) !default; // #eee
$gray-darker:            tint-color($gray-base, 13.5%) !default; // #222
$state-success-text:             #3c763d !default;
$state-success-bg:               #dff0d8 !default;
$state-success-border:           shade-color(adjust-hue($state-success-bg, -10), 5%) !default;
$state-info-text:                #31708f !default;
$state-info-bg:                  #d9edf7 !default;
$state-info-border:              shade-color(adjust-hue($state-info-bg, -10), 7%) !default; 

/**
 *  Overridding Blacklight's brand logo
 */
#header-navbar {
  .navbar-brand {
    @extend .desktop-hidden;
    background-size: contain;
    background-color: white;
    background-position: 20%;
    margin-top: 0;
  }

  .navbar-toggler {
    // Override Bootstrap's hamburger menu SVG to make the horizontal lines to use color white
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    border-radius: 0.25em;
    @include media-breakpoint-down(md) {
      background: $primary;
      margin: 0.5rem 1rem 0.5rem 0.5rem;
    }
  }

  padding: 0;
}

.navbar-logo {
  display: inline-block !important;
}

.navbar {
  font-family: $museoSlab;
  font-size: 16px;

  ul {
    padding: 0;
  }

  li.open > ul {
    display: inline-grid;
    border: 0;
  }
}

.navbar-nav .nav-item .nav-link {
  @include media-breakpoint-up(sm) {
    padding: 0.85rem 0.9rem;
  }
  @include media-breakpoint-down(md) {
    padding-left: 10px;
    padding-right: 10px;
  }
  &:hover, &:focus {
    background-color: $yellow;
    border-color: $yellow;
  }
}

.navbar-nav .active > .nav-link {
  background-color: $yellow;
}

.navbar-light {
  @include media-breakpoint-down(sm) {
    background: $secondary;
  }
}

.navbar-static-top {
  // Bootstrap override
  border-bottom: 0;
  z-index: 1001;
}

.navbar-header {
  @include media-breakpoint-down(lg) {
    .row {
      display: flex;
    }
  }

  @include media-breakpoint-down(md) {
    width: 100%;
    background: white;
    box-shadow: 0 0 5px;
  }
}

.navbar-inner {
  padding-right: 12px;
}

/**
 * Components for navigation wizard. Copied from the LESS source so
 * might need some tweaking to work right
 */
.nav-wizard {
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-color: #2a5459;

  li {
    padding-top: 0;
    padding-right: $line-height-base;
    padding-bottom: 1px;
    padding-left: $line-height-base;
    margin-bottom: $line-height-computed/4;
    text-align: left;
    border-radius: $border-radius-base;

    background-color: $gray-lighter;
    border: $gray;
    color: $gray-darker;

    a:hover {
      background: transparent;
    }

    span {
      display: block;
      padding: 10px 15px;
    }

    p {
      margin-left: 1em;
      margin-right: 1em;
    }
  }

  li.nav-success {
    background-color: $state-success-bg;
    border-color: $state-success-border;
    color: $state-success-text;
  }

  li.nav-success a {
    text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px;
  }

  li.nav-info {
    background-color: $state-info-bg;
    border-color: $state-info-border;
    color: $state-info-text;
  }

  .step {
    font-size: 250%;
    width: 1em;
    float: left;
    margin-right: 0.5em;
    margin-bottom: $line-height-base/2;
  }
}

.nav-pills > li > a {
  padding: 4px 15px;

  /* override bootstrap .nav overrides of button colors */
  &.btn-danger {
    @extend .btn-danger;
  }
}

// Override BS5 so active item has different text color
.nav-item.active {
  --bs-nav-link-color: $link-hover-color;
}

/* Manage menu in the nav-bar */
.manage-btn {
  height: inherit;
  font-size: inherit;
  border: none;
  border-radius: 0px;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0.9rem;

  &:hover {
    background-color: $yellow !important;
    color: $primary;
  }
}

#manage-dropdown.btn-group {
  --bs-border-radius: 0 0 0.375rem 0.375rem;
}

#manage-dropdown:hover .manage-dropdown-menu {
  display: block;
  margin-top: 0;
}

.manage-btn:focus {
  background-color: $yellow;
  color: $secondary;
}

.manage-dropdown-menu {
  display: none;
  border: none;
  border-radius: inherit;
  width: max-content;
  z-index: 10000;
  
  li {
    width: 100%;
  }

  .dropdown-item:hover {
    background-color: $yellow;
  }

  @include media-breakpoint-down(md) {
    width: 100%;
  }
}

.manage-dropdown {
  width: 100%;
  display: block;
}

@include media-breakpoint-down(md) {
  .manage-btn {
    height: 38px;
    padding: 0 0.9rem;
  }
}
