@use "sass:map";
// header
$header-background: #004494 !default;
$header-background-start: #039 !default;
$header-background-end: #1b4ac3 !default;
$header-link-active-background: #003776 !default;

.bcl-header .nav-link {
  color: $eu-blue;
  display: flex;
  align-items: center;
}

.bcl-navbar-toggler {
  background: transparent;
  border: none;
  border-radius: var(--bs-border-radius-sm);
  padding: map.get($spacers, "1-5") map.get($spacers, "2-5");
  color: $link-color;
  line-height: 1;
  @extend .rounded-2;
  .active-icon {
    display: none;
  }
  &[aria-expanded="true"] {
    background-color: $primary;
    color: $white;
    .active-icon {
      display: block;
    }
    .default-icon {
      display: none;
    }
  }
}

.bcl-header--ec,
.ec__header {
  /* stylelint-disable-next-line no-descending-specificity */
  .nav-link {
    color: $ec-blue;
  }
}

.bcl-navbar-header {
  align-items: flex-end;
}

.bcl-header {
  --oel-mega-menu-offset-top: 0px;
  .notification {
    position: relative;
    padding-right: 0;

    span {
      z-index: 1;
      height: 18px;
      padding-right: 5px;
      padding-left: 5px;
      line-height: 0.6rem;
      border-radius: 10px;
      transform: translate(-11px, 5px);
    }
  }
}

.bcl-header__navbar.navbar {
  padding: 0;
  .dropdown-toggle,
  .nav-link {
    padding: map.get($spacers, "2-5") map.get($spacers, 3);
    border: none;
    background: transparent;
  }
  &.collapsing {
    transition: none;
  }
}

@include media-breakpoint-up(md) {
  .bcl-header--ec,
  .ec__header {
    .navbar-brand img {
      width: 180px;
    }
  }
}

@include media-breakpoint-down(lg) {
  body:has(.bcl-header__navbar #main-navbar.collapsing),
  body:has(.bcl-header__navbar #main-navbar.show),
  body:has(.bcl-header__navbar.collapsing),
  body:has(.bcl-header__navbar.show) {
    overflow: hidden;
  }

  header:has(.bcl-header__navbar #main-navbar.collapsing),
  header:has(.bcl-header__navbar #main-navbar.show),
  header:has(.bcl-header__navbar.collapsing),
  header:has(.bcl-header__navbar.show) {
    height: calc(100vh - var(--oel-mega-menu-offset-top, 0px));
    display: flex;
    flex-flow: column;

    > div:has(.breadcrumb) {
      display: none;
    }
  }

  .bcl-header {
    box-shadow: var(--bs-box-shadow);
  }

  .bcl-header nav + nav {
    min-height: 3.5rem;

    .navbar-toggler {
      position: static;
    }
  }
  .bcl-header__top-navbar {
    z-index: 1040;
  }

  .bcl-header__navbar.navbar {
    background: $white;
    padding-top: 0;
    z-index: 1030;
    width: 100%;
    align-items: flex-start;
    height: 100%;
    &:not(:has(.bcl-mega-menu__container.show)) {
      height: auto;
      overflow: auto;
    }
    .navbar-nav {
      width: 100%;
      margin-top: 1rem;
      &:has(.bcl-mega-menu__container.show) {
        .nav-item {
          display: none;
        }
        .nav-item:has(.bcl-mega-menu__container.show) {
          display: block;
        }
      }
      .dropdown-toggle,
      .nav-link {
        color: $dark;
        width: 100%;
        // Use flex for icon spacing.
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        position: relative;
        padding: 1rem;
        border-bottom: 1px solid $primary-bg-subtle;
        text-align: left;
        // Unset border-radius for buttons.
        border-radius: 0;
        // Allow text wrapping in buttons.
        white-space: normal;
        &.active {
          color: $dark;
        }
        &:focus-visible {
          outline: 2px solid $primary;
          // Don't let the outline overlap other elements.
          outline-offset: -2px;
          // Remove the shadow from bootstrap style.
          box-shadow: none;
        }
        // Whenever ::after is used for an icon, it must not shrink.
        // This also applies to .dropdown-toggle, which gets the icon from Bootstrap.
        &::after {
          flex-shrink: 0;
        }
      }
      // The mega menu trigger gets a different type of icon.
      .bcl-mega-menu > .dropdown-toggle {
        &:after {
          background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.57488%2013.25L8.46238%2014.125L15.1374%207.45L8.43738%200.75L7.56238%201.625L12.7276%206.81247H0.5V8.06247H12.7512L7.57488%2013.25Z%22%20fill%3D%22%23212529%22%2F%3E%3C%2Fsvg%3E");
          align-self: center;
          content: "";
          // Unset border from bootstrap style.
          border: none;
          width: 20px;
          height: 20px;
          background-size: cover;
          background-position: center;
        }
      }
      .dropdown-item {
        white-space: normal;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .bcl-header__navbar {
    background: linear-gradient(
      90deg,
      $header-background-start 0%,
      $header-background-end 100%
    );
    .dropdown-toggle,
    .nav-link {
      color: $white;
    }
  }

  .bcl-header--ec,
  .ec__header {
    .bcl-header__navbar {
      background: $header-background;
    }
  }

  .bcl-header--neutral {
    .bcl-header__navbar {
      background: $gray-700;
    }
  }

  .bcl-header .navbar-toggler {
    position: relative;
    right: 0;
    bottom: 0;
  }

  .bcl-header__navbar .bcl-mega-menu {
    --bcl-mega-menu-zindex: 1050; // Make sure dropdown overlaps the search offcanvas
  }

  .bcl-header__navbar.collapse {
    display: block;
  }

  .bcl-header--ec,
  .ec__header {
    .navbar-brand img {
      width: 285px;
    }
  }

  .bcl-header__navbar.navbar {
    .dropdown-toggle,
    .nav-link {
      border-radius: 0;
      &:hover {
        background: $primary-bg-subtle;
        color: $dark;
        &:focus-visible {
          outline-color: $primary;
        }
      }
      &.active,
      &.show {
        background: $white;
        color: $dark;
        &:focus-visible {
          outline-color: $primary;
        }
      }
      &:focus-visible {
        box-shadow: none;
        border: none;
        outline: 2px solid $white;
        outline-offset: -8px;
      }
    }
    .dropdown-toggle {
      &:after {
        background-color: $white;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.625 0.725L1.19375 0.1375L4.99375 3.9625L8.80625 0.125L9.375 0.7125L4.99375 5.125L0.625 0.725Z' fill='black'/%3E%3C/svg%3E");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0.625 0.725L1.19375 0.1375L4.99375 3.9625L8.80625 0.125L9.375 0.7125L4.99375 5.125L0.625 0.725Z' fill='black'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        display: inline-block;
        width: 10px;
        height: 10px;
        border: none;
        margin-top: 4px;
      }
      &:hover {
        &:after {
          background-color: $dark;
        }
      }
      &.active {
        &:after {
          background-color: $primary;
        }
      }
      &.show {
        &:after {
          background-color: $primary;
          transform: rotate(180deg);
        }
      }
      &.no-chevron {
        &:after {
          display: none;
        }
      }
    }
  }
}

.bcl-language-list-modal {
  .btn-close {
    opacity: 1;
  }
  .modal-title {
    @extend %heading;
    @include font-size($h5-font-size);
  }
  &.bcl-language-list-modal--ec,
  &.bcl-language-list-modal--eu {
    .modal-body {
      padding-top: map.get($spacers, 2);
      overflow: visible;
    }
    .modal-header {
      border: 0;
      padding: 0;
    }
  }
  &.bcl-language-list-modal--eu {
    .modal-body {
      background: $white;
    }
    .modal-dialog {
      background: $white;
    }
    .modal-title {
      color: $eu-cta-color;
    }
    svg {
      color: $eu-cta-color;
    }
    .btn-close {
      filter: $btn-close-eu-filter;
    }
  }
  &.bcl-language-list-modal--ec {
    background: $eu-background-color;
    .modal-content {
      background: $eu-background-color;
    }
    .modal-title {
      color: $white;
    }
    svg {
      color: $white;
    }
    .btn-close {
      filter: $btn-close-white-filter;
    }
  }
}