@use 'sass:color';

$cmenu-back-icon: '\e977' !default;
$cmenu-back-icon-margin: 8px !default;
$cmenu-bigger-caret-font-size: 18px !default;
$cmenu-bigger-font-size: 16px !default;
$cmenu-bigger-li-height: 18px !default;
$cmenu-bigger-li-line-height: 18px !default;
$cmenu-bigger-li-padding: 0 16px !default;
$cmenu-bigger-max-width: 280px !default;
$cmenu-bigger-min-width: 112px !default;
$cmenu-caret-blank-icon: 14px !default;
$cmenu-caret-font-size: 14px !default;
$cmenu-caret-icon: '\e956' !default;
$cmenu-caret-icon-rtl: '\e937' !default;
$cmenu-caret-li-padding: 36px !default;
$cmenu-caret-right: 7px !default;
$cmenu-icon-margin-right: 8px !default;
$cmenu-icon-bigger-margin-right: 12px !default;
$cmenu-li-height: 14px !default;
$cmenu-li-padding: 6px !default;
$cmenu-li-right-padding: 6px !default;
$cmenu-li-border-width: 1px !default;
$cmenu-max-width: 240px !default;
$cmenu-icon-font-size: $text-sm !default;
$cmenu-icon-bigger-font-size: $text-lg !default;
$cmenu-min-width: 120px !default;
$cmenu-parent-ul-box-shadow: $shadow-lg !default;
$cmenu-seperator-bigger-padding: 4px 0 !default;
$cmenu-seperator-padding: 4px 0 !default;
$cmenu-ul-border: 1px solid $border-light !default;
$cmenu-ul-border-radius: $radius-8 !default;
$cmenu-ul-padding: 4px !default;
$cmenu-ul-bigger-padding: 6px !default;
$cmenu-caret-color: $content-text-color-focus !default;
$cmenu-color: $content-text-color !default;
$cmenu-disable-text: $flyout-text-color-disabled !default;
$cmenu-font-size: $text-sm !default;
$cmenu-font-weight: $font-weight-normal !default;
$cmenu-li-bgcolor: $flyout-bg-color-hover !default;
$cmenu-li-border-color: $border-light !default;
$cmenu-li-border-style: solid !default;
$cmenu-li-selection-bgcolor: $flyout-bg-color-selected !default;
$cmenu-li-selection-font-color: $flyout-text-color-selected !default;
$cmenu-li-hover-outline-offset: 0 !default;
$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
$cmenu-li-selected-outline-offset: 0 !default;
$cmenu-icon-color: $icon-color !default;
$cmenu-icon-disabled-color: $icon-color-disabled !default;
$cmenu-selected-color: $flyout-text-color-selected !default;
$cmenu-sub-ul-box-shadow: $shadow-lg !default;
$cmenu-ul-bgcolor: $flyout-bg-color !default;
$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
$cmenu-caret-hover-color: $cmenu-caret-color !default;
$cmenu-hover-icon-color: $icon-color-pressed !default;
$cmenu-border-none: 0 !default;
$cmenu-padding-none: 0 !default;
$cmenu-margin-none: 0 !default;
$cmenu-scroll-margin-top: -12px !default;
$cmanu-scroll-padding: 16px 0 !default;
$cmenu-container-ul-font-family: $font-family !default;
$cmenu-ul-height: 1px !default;
$cmenu-height-none: 0 !default;
$cmenu-vscroll-bar-height: 100% !default;
$cmenu-scroll-nav-height: 16px !default;
$cmenu-auto-height: auto !default;
$cmenu-normal-line-height: normal !default;
$cmenu-bigger-li-size-height: 40px !default;
$cmenu-bigger-li-size-line-height: 21px !default;
$cmenu-bigger-li-size-padding: 9px !default;
$cmenu-caret-icon-padding: 9px 36px 9px 9px !default;
$cmenu-bigger-caret-icon-margin: 3px 0 !default;
$cmenu-item-icon-margin-bottom: 2px !default;
$cmenu-bigger-rtl-caret-icon-padding: 9px 9px 9px 36px !default;
$cmenu-item--icon-margin-bottom: 1px !default;
$cmenu-item-focus-viible-border-radius: $radius-4 !default;
$cmenu-small-caret-icon-font-size:12px !default;
$cmenu-item-icon-margin-top: 4px 0 !default;
$cmenu-disabled-item-opacity: 1 !default;

@mixin ul-layout {
  font-weight: $cmenu-font-weight;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  user-select: none;

  &.e-ul,
  &.e-ul * {
    box-sizing: border-box;

    &:focus {
      outline: none;
    }
  }
}

@mixin ul-size {
  font-size: $cmenu-font-size;
  padding: $cmenu-ul-padding;
}

@mixin li-layout {
  cursor: pointer;
  position: relative;

  &.e-menu-hide {
    display: none;
  }

  &.e-menu-header {
    border-bottom-style: $cmenu-li-border-style;
    border-bottom-width: $cmenu-li-border-width;
  }

  & .e-menu-url {
    text-decoration: none;
  }

  & .e-menu-icon {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }

  &.e-separator {
    cursor: auto;
    line-height: normal;
    pointer-events: none;
  }
}

@mixin li-size {
  height: $cmenu-li-height;
  line-height: $cmenu-li-height;
  @if $skin-name == 'fluent2' {
    line-height: 19px;
    height: 32px;
  }
  padding: $cmenu-li-padding;

  & .e-menu-url {
    display: inline-block;
    min-width: 120px;
  }

  & .e-menu-icon {
    font-size: $cmenu-icon-font-size;
    line-height: $cmenu-li-height;
    margin-right: $cmenu-icon-margin-right;
    width: 1em;
  }

  & .e-caret {
    line-height: $cmenu-li-height;
    margin-left: 16px;
    margin-right: 0;
    position: absolute;
    right: $cmenu-caret-right;
    @if $skin-name == 'fluent2' {
      padding: 4px 0;
    }
  }

  &.e-menu-caret-icon {
    padding-right: $cmenu-caret-li-padding;
  }

  &.e-separator {
    @include separator-size;
    margin: $cmenu-seperator-padding;
  }
}

@mixin separator-size {
  border-bottom-style: $cmenu-li-border-style;
  border-bottom-width: $cmenu-li-border-width;
  height: auto;
}

@mixin rtl-li-layout {
  & .e-menu-icon {
    margin-right: 0;
  }

  & .e-caret {
    margin-left: 0;
    margin-right: 16px;
    right: auto;
  }
}

@mixin rtl-li-size {
  & .e-menu-icon {
    margin-left: $cmenu-icon-margin-right;
    @if $skin-name == 'fluent2' {
      margin: 3px 3px 3px 5px;
    }
  }

  & .e-caret {
    left: $cmenu-caret-right;
  }

  &.e-menu-caret-icon {
    @if $skin-name != 'FluentUI' {
      padding-left: $cmenu-caret-li-padding;
    }
    padding-right: $cmenu-li-right-padding;
  }

  &.e-blankicon {
    padding-left: $cmenu-caret-blank-icon;

    &.e-menu-caret-icon {
      padding-left: $cmenu-caret-li-padding;
    }
  }
}

@include export-module('contextmenu-layout') {
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        @include ul-layout;
        @include ul-size;
        border: $cmenu-ul-border;
        border-radius: $cmenu-ul-border-radius;
        box-shadow: $cmenu-sub-ul-box-shadow;
        display: none;
        min-width: $cmenu-min-width;
        position: absolute;

        &.e-contextmenu {
          box-shadow: $cmenu-parent-ul-box-shadow;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'Material3' {
            padding: $cmenu-nrml-ul-padding;
          }
          &.e-contextmenu-template {
            .e-menu-caret-icon {
              display: flex;
            }
          }
        }

        &.e-ul {
          font-family: $cmenu-container-ul-font-family;
        }

        & .e-menu-item  {
          @include li-layout;
          @include li-size;

          & .e-menu-icon {
            @if $skin-name == 'fluent2' {
              margin-bottom: $cmenu-item--icon-margin-bottom;
            }
          }

          & .e-caret {
            font-size: $cmenu-caret-font-size;
          }

          & .e-previous {
            margin-right: $cmenu-back-icon-margin;
          }

          &.e-disabled {
            cursor: auto;
            pointer-events: none;
            @if $skin-name == 'tailwind3' {
              color: $flyout-text-color-disabled;
            }
          }

          &.e-separator {
            @if $skin-name == 'fluent2' {
              padding: $cmenu-padding-none !important;  /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible {
            @if $skin-name == 'fluent2' {
              border-radius: $cmenu-item-focus-viible-border-radius;
              background-color: $content-bg-color;
              box-shadow: $shadow-focus-ring1;
            }
            @if $skin-name == 'tailwind3' {
              box-shadow: $shadow-focus-ring2;
              background: $flyout-bg-color;
            }
          }
        }

        .e-menu-item .e-checkbox-wrapper {
          width: max-content;
        }
      }
    }

    &.e-sfcontextmenu {
      position: absolute;

      & .e-menu-vscroll {
        position: absolute;
      }

      & ul {
        white-space: nowrap;

        &.e-transparent {
          background: transparent;
          border: $cmenu-border-none;
          box-shadow: none;
          height: $cmenu-ul-height;
          left: 0;
          min-width: 0;
          padding: $cmenu-padding-none;
          top: 0;
          width: 0;
        }

        &.e-transparent .e-menu-item {
          height: $cmenu-height-none;
          padding: $cmenu-padding-none;
        }

        &.e-transparent .e-menu-item.e-separator {
          border: $cmenu-border-none;
          margin: $cmenu-margin-none;
        }
      }
    }

    &:not(.e-menu-container) {
      & .e-menu-vscroll.e-vscroll {
        box-shadow: $cmenu-parent-ul-box-shadow;

        & .e-vscroll-bar {
          height: $cmenu-vscroll-bar-height;
          width: inherit;
        }

        & .e-scroll-nav {
          height: $cmenu-scroll-nav-height;
        }

        &:not(.e-scroll-device) {
          padding: $cmanu-scroll-padding;
        }

        & ul {
          box-shadow: none;
          margin-top: $cmenu-scroll-margin-top;
          width: inherit;
        }
      }
    }
  }

  .e-rtl.e-contextmenu-wrapper .e-menu-item,
  .e-rtl.e-contextmenu-container .e-menu-item {
    @include rtl-li-layout;
    @include rtl-li-size;
  }

  .e-contextmenu-wrapper .e-menu-item:not(.e-control),
  .e-contextmenu-container .e-menu-item:not(.e-control) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .e-small .e-contextmenu-wrapper ul .e-menu-item .e-caret,
  .e-small .e-contextmenu-wrapper ul .e-menu-icon {
    @if $skin-name == 'fluent2' {
      font-size: $cmenu-small-caret-icon-font-size;
    }
  }

  .e-small .e-contextmenu-wrapper ul .e-menu-item,
  .e-small.e-contextmenu-wrapper ul .e-menu-item {
    @if $skin-name == 'tailwind3' {
      font-size: $cmenu-small-font-size;
      height: $cmenu-small-li-height;
      line-height: $cmenu-small-li-line-height;
      .e-caret,
      .e-menu-icon {
        font-size: $cmenu-small-font-size;
        line-height: $cmenu-small-li-line-height;
      }
      &.e-separator {
        height: $cmenu-auto-height;
      }
    }
  }
}

@mixin focused-icon-color {
  @if $skin-name != 'bootstrap5' {
    & .e-caret {
      color: $cmenu-caret-color;
      @if $skin-name == 'fluent2' {
        color: $cmenu-hover-icon-color;
      }
    }

    & .e-menu-icon {
      @if $skin-name == 'fluent2' {
        color: $cmenu-hover-icon-color;
      }
      @else if $skin-name == 'bootstrap5.3' {
        color: $cmenu-hover-icon-color;
      }
      @else {
        color: $cmenu-icon-color;
      }
    }
  }
}

@mixin selected-icon-color {
  @if $skin-name != 'bootstrap5' {
    & .e-caret {
      color: $cmenu-caret-hover-color;
    }

    & .e-menu-icon {
      @if $skin-name == 'bootstrap5.3' {
        color: $flyout-text-color-pressed;
      }
      @else {
        color: $cmenu-hover-icon-color;
      }
    }
  }
}

@mixin icon-color {
  &.e-menu-header {
    border-bottom-color: $cmenu-li-border-color;
  }
  @include focused-icon-color;
}

@mixin focused-color {
  background-color: $cmenu-li-bgcolor;
  color: $cmenu-li-selection-font-color;
  outline: $cmenu-li-hover-outline;
  outline-offset: $cmenu-li-hover-outline-offset;
  @if $skin-name == 'fluent2' {
    border-radius: 4px;
  }
}

@mixin selected-color {
  background-color: $cmenu-li-selection-bgcolor;
  color: $cmenu-selected-color;
  outline: $cmenu-li-selected-outline;
  outline-offset: $cmenu-li-selected-outline-offset;
  @if $skin-name == 'fluent2' {
    border-radius: 4px;
    box-shadow: none;
  }
}

@mixin disabled-color {
  & .e-disabled {
    color: $cmenu-disable-text;
    opacity: $cmenu-disabled-item-opacity;
    & .e-menu-icon {
      color: $cmenu-icon-disabled-color;
    }

    & .e-caret {
      color: $cmenu-icon-disabled-color;
    }

    & .e-menu-url {
      color: $cmenu-disable-text;
    }
  }
}

@include export-module('contextmenu-theme') {
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        @if $skin-name == 'Material3' {
          background: $cmenu-ul-bgcolor;
        }
        @else {
          background-color: $cmenu-ul-bgcolor;
        }
        color: $cmenu-color;

        & .e-menu-item  {
          @include icon-color;
          @if $skin-name == 'fluent2' {
            & .e-menu-icon,
            & .e-caret {
              color: $icon-color;
            }
          }

          & .e-menu-url {
            color: $cmenu-color;
          }

          &.e-focused {
            @include focused-color;
            @include focused-icon-color;
          }

          &.e-selected {
            @include selected-color;
            @include selected-icon-color;
          }

          &:active {
            @if $skin-name == 'bootstrap5.3' {
              background-color: $cmenu-li-selection-bgcolor;
              color: $cmenu-selected-color;

              & .e-menu-icon {
                color: $cmenu-selected-color;
              }
            }
          }
        }

        @include disabled-color;

        & .e-separator {
          border-bottom-color: $cmenu-li-border-color;
        }
      }
    }

    &:not(.e-menu-container) {
      & .e-menu-vscroll.e-vscroll {
        @if $skin-name == 'Material3' {
          background: $cmenu-ul-bgcolor;
        }
        @else {
          background-color: $cmenu-ul-bgcolor;
        }
        border: $cmenu-ul-border;

        & .e-scroll-nav {
          border-color: $cmenu-li-border-color;
          @if $skin-name == 'material-dark' {
            background: $cmenu-ul-bgcolor;
          }
        }
      }
    }
  }
}

@include export-module('context-menu-fluent2-icons') {
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        & .e-menu-item  {
          & .e-previous {
            &::before {
              content: '\e773';
            }
          }

          & .e-caret {
            &::before {
              content: '\e748';
            }
          }
        }
      }
    }
  }

  .e-rtl.e-contextmenu-wrapper .e-menu-item,
  .e-rtl.e-contextmenu-container .e-menu-item {
    & .e-caret {
      &::before {
        content: '\e765';
      }
    }
  }
}