// Hydrogen / Component / Styles

@use "sass:color";

// This reset mixin is used to specify component level style resets if they're needed. These styles only apply to the versioned instance of the component.
@mixin h2-component-menu-reset() {}

@mixin h2-component-menu-trigger(
  $medium
) {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10000000;
  @media #{$medium} {
    display: none;
  }
  [data-h2-mobile-menu-trigger-open-label] {
    display: inline;
  }
  [data-h2-mobile-menu-trigger-close-label] {
    display: none;
  }
  &.h2-active {
    [data-h2-mobile-menu-trigger-open-label] {
      display: none;
    }
    [data-h2-mobile-menu-trigger-close-label] {
      display: inline;
    }
  }
}

// This mixin specifies generic styles that apply to all variations/combinations of this component.
@mixin h2-component-menu-generic(
  // Main Menu
  $main-menu-background-color,
  $main-menu-divider-color,
  $main-menu-font-color,
  $main-menu-icon-color,
  $main-menu-anchor-hover,
  $main-menu-button-background-color,
  // All Submenus
  $submenu-background-color,
  // Submenu 1
  $submenu-1-border-color,
  $submenu-1-font-color,
  $submenu-1-anchor-hover,
  $submenu-1-button-background-color,
  // Submenu 2
  $submenu-2-border-color,
  $submenu-2-font-color,
  $submenu-2-anchor-hover,
  $submenu-2-button-background-color,
  // Submenu 3
  $submenu-3-border-color,
  $submenu-3-font-color,
  $submenu-3-anchor-hover,
  $submenu-3-button-background-color,
  // Submenu 4
  $submenu-4-border-color,
  $submenu-4-font-color,
  $submenu-4-anchor-hover,
  $submenu-4-button-background-color,
  // Submenu 5
  $submenu-5-border-color,
  $submenu-5-font-color,
  $submenu-5-anchor-hover,
  $submenu-5-button-background-color,
  // Misc
  $font-scale-default,
  $line-height,
  $medium,
  $padding
) {
  @if color.alpha($main-menu-background-color) == 1 {
    background: $main-menu-background-color;
  }
  @else {
    background: rgba(color.red($main-menu-background-color),color.green($main-menu-background-color), color.blue($main-menu-background-color), 1);
  }
  display: none;
  height: 100vh;
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000000;

  @media #{$medium} {
    background: $main-menu-background-color;
  }

  // Don't forget that these menu styles are mobile first, so when modifying menu styles, always begin from a mobile view.

  &.h2-mobile-menu-active {
    display: block;
  }

  * {
    vertical-align: middle;
  }

  // All menu lists.
  [data-h2-menulist] {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      margin: 0;
    }
  }

  // Set main menu styles, along with nested children generic styles.
  [data-h2-menu-container] >[data-h2-menulist] {
    // background: $main-menu-background-color;
    width: 100%;

    &:last-child {
      padding-bottom: 6rem;
      @media #{$medium} {
        padding-bottom: 0;
      }
    }

    // All generic menu items.
    li {
      position: relative;

      >[role="menuitem"] {
        display: block;
        font-size: $font-scale-default;
        line-height: $line-height;
        margin: 0 $padding;
        padding-top: $padding;
        padding-right: calc(#{$padding} * 3);
        padding-bottom: $padding;
      }

      // All submenu triggers.
      [data-h2-submenu-trigger] {
        background: none;
        border: none;
        cursor: pointer;
        line-height: $line-height;
        padding: $padding calc(#{$padding} * 1.5);
        position: absolute;
        top: 1px;
        right: $padding;
        [data-h2-submenu-trigger-accessibility-text] {
          height: 1px;
          overflow: hidden;
          position: absolute;
          top: -100vw;
          left: -100vw;
          visibility: hidden;
          width: 1px;
        }
        [data-h2-submenu-trigger-add-icon] {
          display: block;
          font-size: $font-scale-default;
          line-height: $line-height;
        }
        [data-h2-submenu-trigger-remove-icon] {
          display: none;
          font-size: $font-scale-default;
          line-height: $line-height;
        }
      }

      // When the menu item is set to active, the icons change to reflect the submenu is open.
      &.h2-active {
        >[data-h2-submenu-trigger] {
          [data-h2-submenu-trigger-add-icon] {
            display: none;
          }
          [data-h2-submenu-trigger-remove-icon] {
            display: block;
          }
        }
        >[data-h2-menulist] {
          display: block;
        }
      }

    }

    // First Submenu Level
    >li {
      [data-h2-menulist] {
        box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, .3);
        display: none;
        margin-top: 0;
        text-align: left;
      }
    }

  }

  // Set main menu font colors.
  [data-h2-menu-container] >[data-h2-menulist] >li >[role="menuitem"] {
    color: $main-menu-font-color;
  }

  // Set main menu icon colors.
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-add-icon],
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-remove-icon] {
    color: $main-menu-icon-color;
  }

  // Generic color settings; Hydrogen only supports 5 levels deep.
  // Main Menu
  [data-h2-menu-container] >[data-h2-menulist] >li:not(:first-child) >[role="menuitem"] {
    border-top: 1px solid $main-menu-divider-color;
  }
  [data-h2-menu-container] >[data-h2-menulist]+[data-h2-menulist] >li >[role="menuitem"] {
    border-top: 1px solid $main-menu-divider-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >a:hover {
    color: $main-menu-anchor-hover;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-submenu-trigger] {
    background-color: $main-menu-button-background-color;
  }
  // Submenu Layer 1
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] {
    background-color: $submenu-background-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li:not(:first-child) >[role="menuitem"] {
    border-top-color: $submenu-1-border-color;
    border-top-style: solid;
    border-top-width: 1px;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
    color: $submenu-1-font-color;
    margin-left: calc(#{$padding} * 1.5);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-add-icon],
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-remove-icon] {
    color: $submenu-1-font-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >a:hover {
    color: $submenu-1-anchor-hover;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] {
    background-color: $submenu-1-button-background-color;
  }
  // Submenu Layer 2
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] {
    background-color: darken($submenu-background-color, 5%);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li:not(:first-child) >[role="menuitem"] {
    border-top-color: $submenu-2-border-color;
    border-top-style: solid;
    border-top-width: 1px;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
    color: $submenu-2-font-color;
    margin-left: calc(#{$padding} * 2);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-add-icon],
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-remove-icon] {
    color: $submenu-2-font-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >a:hover {
    color: $submenu-2-anchor-hover;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] {
    background-color: $submenu-2-button-background-color;
  }
  // Submenu Layer 3
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] {
    background-color: darken($submenu-background-color, 10%);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li:not(:first-child) >[role="menuitem"] {
    border-top-color: $submenu-3-border-color;
    border-top-style: solid;
    border-top-width: 1px;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
    color: $submenu-3-font-color;
    margin-left: calc(#{$padding} * 2.5);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-add-icon],
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-remove-icon] {
    color: $submenu-3-font-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >a:hover {
    color: $submenu-3-anchor-hover;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] {
    background-color: $submenu-3-button-background-color;
  }
  // Submenu Layer 4
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] {
    background-color: darken($submenu-background-color, 15%);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li:not(:first-child) >[role="menuitem"] {
    border-top-color: $submenu-4-border-color;
    border-top-style: solid;
    border-top-width: 1px;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
    color: $submenu-4-font-color;
    margin-left: calc(#{$padding} * 3);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-add-icon],
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-remove-icon] {
    color: $submenu-4-font-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >a:hover {
    color: $submenu-4-anchor-hover;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] {
    background-color: $submenu-4-button-background-color;
  }
  // Submenu Layer 5
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] {
    background-color: darken($submenu-background-color, 20%);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li:not(:first-child) >[role="menuitem"] {
    border-top-color: $submenu-5-border-color;
    border-top-style: solid;
    border-top-width: 1px;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
    color: $submenu-5-font-color;
    margin-left: calc(#{$padding} * 3.5);
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-add-icon],
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] [data-h2-submenu-trigger-remove-icon] {
    color: $submenu-5-font-color;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >a:hover {
    color: $submenu-5-anchor-hover;
  }
  [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-submenu-trigger] {
    background-color: $submenu-5-button-background-color;
  }

}

@mixin h2-component-menu-topbar(
  $mq-medium,
  $padding,
  $menu-divider-color
) {
  @media #{$mq-medium} {
    display: block;
    height: auto;
    overflow: visible;
    position: relative;
    width: 100%;

    [data-h2-menu-container] >[data-h2-menulist] {
      >li {
        display: inline-block;
        margin-left: -4px;
        position: relative;

        &:not(:last-child) {
          border-right: 1px solid $menu-divider-color;
        }

        >[role="menuitem"] {
          border: none !important;
          display: inline-block;
          margin: 0;
          padding: calc(#{$padding} / 1.5) $padding;
        }

        >[data-h2-submenu-trigger] {
          padding: calc(#{$padding} / 1.5) $padding;
          position: relative;
          top: auto;
          right: auto;
        }

        >[data-h2-menulist] {
          max-height: 70vh;
          min-width: 25rem;
          overflow: auto;
          position: absolute;
          left: 0;
          width: 25vw;
        }

        [data-h2-menulist] {
          li {
            >[role="menuitem"] {
              margin: 0 $padding;
              padding: calc(#{$padding} / 1.5) calc(#{$padding} * 3) calc(#{$padding} / 1.5) 0;
            }
            >[data-h2-submenu-trigger] {
              padding: calc(#{$padding} / 1.5) $padding;
              right: $padding;
            }
          }
        }

      }
    }

    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc(#{$padding} * 1.5);
    }

    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc(#{$padding} * 2);
    }

    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc(#{$padding} * 2.5);
    }

    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc(#{$padding} * 3);
    }

  }
}

@mixin h2-component-menu-topbar-sticky(
  $mq-medium
) {
  @media #{$mq-medium} {
    position: sticky;
    top: 0;
    left: 0;
  }
}

@mixin h2-component-menu-topbar-contained(
  $mq-medium,
  $container,
  $padding,
  $menu-divider-color
) {
  @media #{$mq-medium} {
    max-width: initial;

    [data-h2-menu-container] {
      margin-left: auto;
      margin-right: auto;
      max-width: $container;
    }

    [data-h2-menu-container] >[data-h2-menulist] {
      >li {

        &:last-child {
          border-right: 1px solid $menu-divider-color;
        }

        &:first-child {
          border-left: 1px solid $menu-divider-color;
        }

      }
    }
  }
}

@mixin h2-component-menu-topbar-center(
  $mq-medium
) {
  @media #{$mq-medium} {
    [data-h2-menu-container] >[data-h2-menulist] {
      text-align: center;
    }
  }
}

@mixin h2-component-menu-topbar-right(
  $mq-medium
) {
  @media #{$mq-medium} {
    [data-h2-menu-container] >[data-h2-menulist] {
      text-align: right;
      >li {
        >[data-h2-menulist] {
          left: auto;
          right: 0;
        }
      }
    }
  }
}

@mixin h2-component-menu-topbar-split(
  $mq-medium
) {
  @media #{$mq-medium} {
    [data-h2-menu-container] {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    [data-h2-menu-container] >[data-h2-menulist]:first-child {
      width: auto;
    }
    [data-h2-menu-container] >[data-h2-menulist]:last-child {
      text-align: right;
      width: auto;
      >li {
        >[data-h2-menulist] {
          left: auto;
          right: 0;
        }
      }
    }
  }
}

@mixin h2-component-menu-sidebar(
  $mq-medium,
  $padding
) {
  @media #{$mq-medium} {
    display: block;
    height: 100vh;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: calc((1/4) * 100%);
    [data-h2-menu-container] >[data-h2-menulist] {
      li {
        position: relative;
        >[role="menuitem"] {
          padding: calc(#{$padding / 1.5}) calc(#{$padding} * 3) calc(#{$padding / 1.5}) 0;
        }
        >[data-h2-submenu-trigger] {
          padding: calc(#{$padding / 1.5}) $padding;
          top: 1px;
        }
      }
    }
  }
}

@mixin h2-component-menu-sidebar-right(
  $mq-medium,
  $padding
) {
  @media #{$mq-medium} {
    top: 0;
    left: auto;
    right: 0;
  }
}

@mixin h2-component-menu-sidebar-padded(
  $mq-medium,
  $multiplier,
  $padding
) {
  @media #{$mq-medium} {
    [data-h2-menu-container] >[data-h2-menulist] {
      li {
        >[role="menuitem"] {
          margin-right: calc(#{$padding} #{$multiplier});
          margin-left: calc(#{$padding} #{$multiplier});
        }
        >[data-h2-submenu-trigger] {
          right: calc(#{$padding} #{$multiplier});
        }
      }
    }
    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc((#{$padding} #{$multiplier}) + .5rem);
    }
    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc((#{$padding} #{$multiplier}) + 1rem);
    }
    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc((#{$padding} #{$multiplier}) + 1.5rem);
    }
    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc((#{$padding} #{$multiplier}) + 2rem);
    }
    [data-h2-menu-container] >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[data-h2-menulist] >li >[role="menuitem"] {
      margin-left: calc((#{$padding} #{$multiplier}) + 2.5rem);
    }
  }
}