// Hydrogen / Component / System
// This file is processed and then imported into @hydrogen-design-system/system

// File paths must respect how the system's architecture works.
//  - root
//    - core
//      - styles
//    - properties
//      - styles
//      - individual properties
//        - styles
//    - components
//      - individual components
//        - styles
//          - [you're here]

// Unlike the versioned copy, this stylesheet doesn't require Hydrogen's core because the core is imported by the system itself in that repository later on.

// Forward theme variables from the core module first so that they can be accessed and modified.
@forward "../../../core/styles/defaults";

// Load map variables from the core module so that the component can leverage them when generating selectors.
@use "../../../core/styles/maps" as maps;

// Load functions from the core module so that the component can leverage them when generating selectors.
@use "../../../core/styles/functions" as fn;

// Load theme variables from the core module so that they can be passed to the component mixins.
@use "../../../core/styles/defaults" as var;

// Load the component so that its mixins can be accessed.
@use "menu" as *;

// Mobile Menu Body Lock Class
.h2-mobile-menu-body-lock {
  overflow: hidden;
  @media #{var.$mq-medium} {
    overflow: visible;
  }
}

// Load the generic mixin with its respective theme variables.
[data-h2-menu-wrapper] {
  // Menu Trigger
  [data-h2-mobile-menu-trigger] {
    @include h2-component-menu-trigger(
      $medium: var.$mq-medium
    );
  }
  // Menu
  [data-h2-menu] {
    // Load the generic component mixin.
    @include h2-component-menu-generic(
      // Main Menu
      $main-menu-background-color: var.$menu-bg-color,
      $main-menu-divider-color: var.$menu-divider-color,
      $main-menu-font-color: var.$menu-font-color,
      $main-menu-icon-color: var.$menu-icon-color,
      $main-menu-anchor-hover: fn.contrasting-color(var.$menu-bg-color, lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
      $main-menu-button-background-color: fn.contrasting-color(var.$menu-bg-color, rgba(var.$white, .1), rgba(var.$black, .1)),
      // All Submenus
      $submenu-background-color: var.$submenu-bg-color,
      // Submenu 1
      $submenu-1-border-color: fn.contrasting-color(var.$submenu-bg-color, rgba(var.$white, .3), rgba(var.$black, .3)),
      $submenu-1-font-color: fn.contrasting-color(var.$submenu-bg-color, var.$white, var.$black),
      $submenu-1-anchor-hover: fn.contrasting-color(var.$submenu-bg-color, lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
      $submenu-1-button-background-color: fn.contrasting-color(var.$submenu-bg-color, rgba(var.$white, .1), rgba(var.$black, .1)),
      // Submenu 2
      $submenu-2-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), rgba(var.$white, .3), rgba(var.$black, .3)),
      $submenu-2-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), var.$white, var.$black),
      $submenu-2-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
      $submenu-2-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 5%), rgba(var.$white, .1), rgba(var.$black, .1)),
      // Submenu 3
      $submenu-3-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), rgba(var.$white, .3), rgba(var.$black, .3)),
      $submenu-3-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), var.$white, var.$black),
      $submenu-3-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
      $submenu-3-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 10%), rgba(var.$white, .1), rgba(var.$black, .1)),
      // Submenu 4
      $submenu-4-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), rgba(var.$white, .3), rgba(var.$black, .3)),
      $submenu-4-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), var.$white, var.$black),
      $submenu-4-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
      $submenu-4-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 15%), rgba(var.$white, .1), rgba(var.$black, .1)),
      // Submenu 5
      $submenu-5-border-color: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), rgba(var.$white, .3), rgba(var.$black, .3)),
      $submenu-5-font-color: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), var.$white, var.$black),
      $submenu-5-anchor-hover: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), lighten(var.$hover-font-color, 10%), darken(var.$hover-font-color, 10%)),
      $submenu-5-button-background-color: fn.contrasting-color(darken(var.$submenu-bg-color, 20%), rgba(var.$white, .1), rgba(var.$black, .1)),
      // Misc
      $font-scale-default: var.$font-scale-default,
      $line-height: var.$line-height,
      $medium: var.$mq-medium,
      $padding: var.$padding
    );
  }
}

// Top Style Menus
[data-h2-menu-wrapper*="top"] {
  [data-h2-menu] {
    @include h2-component-menu-topbar(
      $mq-medium: var.$mq-medium,
      $padding: var.$padding,
      $menu-divider-color: var.$menu-divider-color
    );
  }
}
[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="sticky"] {
  [data-h2-menu] {
    @include h2-component-menu-topbar-sticky (
      $mq-medium: var.$mq-medium
    );
  }
}
[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="center"] {
  [data-h2-menu] {
    @include h2-component-menu-topbar-center (
      $mq-medium: var.$mq-medium
    );
  }
}
[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="right"] {
  [data-h2-menu] {
    @include h2-component-menu-topbar-right (
        $mq-medium: var.$mq-medium
    );
  }
}
[data-h2-menu-wrapper*="top"][data-h2-menu-wrapper*="split"] {
  [data-h2-menu] {
    @include h2-component-menu-topbar-split (
      $mq-medium: var.$mq-medium
    );
  }
}

// Sidebar Style Menus
[data-h2-menu-wrapper*="side"] {
  [data-h2-menu] {
    @include h2-component-menu-sidebar (
      $mq-medium: var.$mq-medium,
      $padding: var.$padding
    );
    &+div,
    &+main {
      @media #{var.$mq-medium} {
        margin-left: calc((1/4) * 100%);
        overflow-x: hidden;
        width: calc((3/4) * 100%);
      }
    }
  }
}
[data-h2-menu-wrapper*="side"][data-h2-menu-wrapper*="right"] {
  [data-h2-menu] {
      @include h2-component-menu-sidebar-right (
        $mq-medium: var.$mq-medium,
        $padding: var.$padding
      );
      &+div,
      &+main {
        @media #{var.$mq-medium} {
          margin-left: auto;
          margin-right: calc((1/4) * 100%);
          overflow-x: hidden;
          width: calc((3/4) * 100%);
        }
      }
  }
}