@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/calc.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;

@mixin cx-menuitem(
   $name: "menuitem",
   $state-style-map: $cx-menu-list-item,
   $icon-size: $cx-default-icon-size,
   $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;
      cursor: pointer;
      position: relative;
      border-radius: $cx-default-border-radius;

      &:focus {
         outline: none;
      }

      & > a:hover {
         text-decoration: none;
      }

      .#{$state}focusable > &.#{$state}cursor {
         @include cx-add-state-rules($state-style-map, default);

         &:hover {
            @include cx-add-state-rules($state-style-map, hover);
         }
      }

      .#{$state}focusable.#{$state}cursor > &.#{$state}cursor {
         @include cx-add-state-rules($state-style-map, selected-cursor);
      }

      &.#{$state}disabled {
         @include cx-add-state-rules($state-style-map, disabled);
      }

      & > a {
         text-decoration: none;
         color: inherit;

         &:focus {
            outline: none;
         }
      }

      & > hr {
         border: none;
         border-top: 1px solid $cx-default-menu-separator-color;
         margin: map.get($cx-menu-padding-options, medium);
      }

      @each $size, $value in $cx-menu-padding-options {
         &.#{$state}#{$size}-padding {
            & > a,
            & > span {
               padding: $value;
               line-height: $cx-default-box-line-height;
               border: $cx-default-box-border-width solid transparent;
               display: block;
            }

            &.#{$state}arrow {
               padding-right: cx-calc($icon-size);
            }

            &.#{$state}icon {
               padding-left: cx-calc(
                  max(1lh, $icon-size),
                  cx-top($value),
                  cx-top($value),
                  cx-multiply(cx-left($value), -1)
               );
            }

            &.#{$state}empty {
               padding-right: cx-multiply($icon-size, 0.5);
            }

            & > .#{$element}#{$name}-arrow {
               right: cx-multiply(cx-right($value), 0.5);
            }

            & > .#{$element}#{$name}-button {
               width: cx-calc(cx-top($value), max($icon-size, 1lh), cx-top($value));
            }
         }
      }
   }

   .#{$element}#{$name}-arrow {
      position: absolute;
      width: $icon-size;
      height: $icon-size;
      top: 50%;
      margin-top: cx-multiply($icon-size, -0.5);

      .#{$state}vertical > & {
         transform: rotate(-90deg);
      }
   }

   .#{$element}#{$name}-button {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
   }

   .#{$element}#{$name}-baseline {
      display: inline-block;
      width: 1px;
      margin-left: -1px;
      visibility: hidden;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   .#{$element}#{$name}-icon {
      position: absolute;
      width: $icon-size;
      height: $icon-size;
      top: 50%;
      left: 50%;
      margin-top: cx-multiply($icon-size, -0.5);
      margin-left: cx-multiply($icon-size, -0.5);
      text-align: center;
      line-height: 1;
      font-size: $icon-size;
   }
}

@if (cx-should-include("cx/widgets/MenuItem")) {
   @include cx-menuitem();
}