@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;

@mixin cx-menu(
   $name: "menu",
   $state-style-map: $cx-menu-state-style-map,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);
   $mod: map.get($besm, mod);

   .#{$block}#{$name} {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style: none;

      @include cx-add-state-rules($state-style-map, default);

      &.#{$state}horizontal {
         white-space: nowrap;

         & > .#{$element}#{$name}-item {
            display: inline-block;
            user-select: none;

            @each $size, $value in $cx-menu-padding-options {
               &.#{$state}size-#{$size} > .#{$mod}#{$name} {
                  margin: 0 cx-right($value) 0 cx-left($value);
               }
            }
         }
      }

      @each $size, $value in $cx-menu-padding-options {
         &.#{$state}vertical.#{$state}#{$size}-item-padding .#{$mod}#{$name} {
            margin: $value;
            display: block;
         }
      }

      .#{$element}#{$name}-item {
         &.#{$state}hidden {
            visibility: hidden;
            position: absolute;
         }
      }

      &.#{$state}overflow {
         overflow: hidden;
         display: flex;

         & > .#{$element}#{$name}-item:last-child {
            visibility: hidden;
            position: absolute;
            max-height: 100%;
         }

         &.#{$state}pack > .#{$element}#{$name}-item:last-child {
            visibility: visible;
            position: relative;
         }
      }
   }

   .#{$element}#{$name}-spacer {
      flex: 1 1 0%;
   }
}

@if (cx-should-include("cx/widgets/Menu")) {
   @include cx-menu();
}