/**
Menu general variables and mixins.
 */

@use "sass:math";

// Colour variables used in this component
$menu-main-link-color: $color-cassandra !default;
$menu-main-link-active-color: $color-achillies !default;
$menu-main-link-hover-color: $menu-main-link-active-color !default;
$menu-main-link-dropdown: $color-acamas !default; // Dropdown icon

$submenu-link-color: $color-odysseus !default; // Submenu item text color
$submenu-link-hover-color: $color-nestor !default; // Submenu item hover color
$submenu-link-hover-background: transparent !default; // Submenu item hover color

$navbar-toggler-color: $color-agamemnon !default;

$menu-mobile-background: transparent !default;
$mobile-sidebar-items-border: 2px solid $color-iphis !default;
$mobile-menu-submenu-mobile-background-color: rgba($color-cassandra, 0.1) !default;
$mobile-navigation-overlay-color: rgba($color-cassandra, 0.2) !default;
$mobile-menu-submenu-link-color: $color-cassandra !default;

// Font sizes
$menu-font-size-mobile: $font-size-lg !default;
$menu-font-size-desktop: $font-size-base !default;
$submenu-font-size: $font-size-base !default;
$menu-dropdown-size: 2.3rem !default; // Size of the dropdown arrow
$navbar-toggler-size: 2.3rem !default; // Size of the toggler arrow

$mega-menu-header-font-family: 'Lato', sans-serif !default;
$mega-menu-submenu-font-family: $mega-menu-header-font-family !default;
$mega-menu-submenu-font-weight: normal !default;
$mega-menu-submenu-header-font-size: 25px !default;
$mega-menu-link-line-height: 2rem !default;

// Paddings, margins and heights.
$menu-dropdown-width: 4rem !default;  // Width of desktop dropdown icon (desktop)
$menu-main-link-height: $header-height - (2 * $navbar-padding-y) !default;  // Height of menu item
//$menu-main-link-padding-y: 0.75rem !default;
$menu-main-link-padding-desktop: 0 1.5625rem !default;
$menu-main-link-padding-tablet: 0 1.2rem !default;
$menu-secondary-link-padding-x-tablet: 0.9rem !default;
$menu-secondary-social-icon-padding-tablet: 7px !default;
$navbar-toggler-width: $menu-dropdown-width !default; // Width of mobile menu on/off toggler
$navbar-toggler-height: $header-mobile-height !default; // Height of mobile menu on/off toggler
$submenu-toggler-size: 32px !default;
$submenu-offset-left: -1rem !default; // Move the submenu left or right (desktop)
$submenu-link-height: 2.9rem !default; // Height of links in submenu (desktop)
$mobile-sidebar-items-spacing: 10px !default;
$mobile-sidebar-submenu-spacing: 15px !default;
$mobile-submenu-padding: $mobile-sidebar-items-spacing $mobile-sidebar-submenu-spacing !default;
$mobile-submenu-item-padding: math.div($mobile-sidebar-items-spacing, 2) 0 !default;
$submenu-dropdown-min-width: 12rem !default;

$secondary-menu-link-colors: $color-iphis !default;
$secondary-menu-link-hover-colors: $color-achillies !default;

$mega-menu-submenu-padding: 2rem 15% !default;
$mega-menu-submenu-link-padding-y: 9px !default;
$mega-menu-submenu-header-margin-bottom: 2 * $mega-menu-submenu-link-padding-y !default;

$sidebar-animation-speed: 600ms !default;

@mixin mobile-toggle() {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  position: relative;
  cursor: pointer;

  &::after {
    font-family: "fontello";
    content: "\e80e";
    line-height: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    height: $submenu-toggler-size;
    width: $submenu-toggler-size;
    margin: -5px 0;
  }
}
@mixin mobile-toggle-open() {
  &::after {
    content: "\e80a";
  }
}
@mixin sublist-background() {
  position: relative;

  &::before, &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: $mobile-menu-submenu-mobile-background-color;
    left: -50%;
    top: 0;
    z-index: 0;
    pointer-events: none;
  }
  &::after {
    left: 50%;
  }
}
@mixin sublist-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1.5;
  height: 100%;
  font-weight: $mega-menu-submenu-font-weight;
  margin: 0;
  padding: 5px 0;
  font-size: $submenu-font-size;
  color: $mobile-menu-submenu-link-color;

  @include media-breakpoint-up($navbar-mobile-breakpoint-up) {
    color: $submenu-link-color;
  }

  &:not(h2), a {
    &:hover, &:active, &:focus, &.active-menu-item {
      border: none;
      color: $submenu-link-hover-color;
    }
  }
}
@mixin mobile-menu-first-level-items {
  text-transform: uppercase;
  font-size: $menu-font-size-mobile;
  line-height: $mega-menu-link-line-height;
  font-family: $mega-menu-submenu-font-family;
  padding: math.div($mobile-sidebar-items-spacing, 2) $mobile-sidebar-submenu-spacing;
  font-weight: $mega-menu-submenu-font-weight;
  color: $menu-main-link-active-color;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
