@use 'ej2-base/styles/common/mixin' as *;
@include export-module('menu-layout') {
  .e-menu-wrapper,
  .e-menu-container {
    border: $menu-ul-border;
    border-radius: $cmenu-ul-border-radius;
    display: inline-block;
    line-height: $menu-wrapper-line-height;

    & .e-menu-vscroll {
      height: $menu-inherit-height;
    }

    @at-root {
      & ul {
        @include ul-layout;
        @if $skin-name == 'tailwind3' {
          font-weight: $menu-container-ul-font-weight;
        }
        font-size: $menu-font-size;
        padding: $menu-ul-padding;
        text-align: left;
        white-space: nowrap;

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

        &.e-vertical {
          min-width: 120px;

          & .e-menu-item {
            display: list-item;
          }

          & .e-separator {
            @include separator-size;
          }
        }

        &.e-menu {
          display: inline-block;

          &:not(.e-vertical) {
            padding: $menu-ul-header-padding;

            & .e-separator {
              border-right-style: $menu-li-border-style;
              border-right-width: $menu-li-border-width;
              padding: $menu-separator-padding;
            }
          }

          & .e-menu-item .e-menu-icon {
            width: $menu-icon-width;
          }
        }

        & .e-menu-item  {
          @include li-layout;
          display: inline-flex;
          height: $menu-li-height;
          line-height: $menu-li-line-height;
          padding: $menu-li-padding;
          vertical-align: top;
          white-space: nowrap;

          & .e-menu-icon {
            font-size: $menu-icon-font-size;
            height: $menu-auto-height;
            line-height: $menu-li-line-height;
            margin-right: $menu-icon-margin-right;
            text-align: center;
            @if $skin-name == 'fluent2' {
              margin-bottom: $menu-icon-margin-bottom;
            }
            @else {
              margin-bottom: $menu-icon-margin-bottom;
            }
          }

          & .e-caret {
            font-size: $menu-caret-font-size;
            height: $menu-auto-height;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
              line-height: $menu-icon-li-height;
            }
            @else {
              line-height: $menu-li-line-height;
            }
            position: absolute;
            right: $menu-caret-right;
            top: 0;
            width: auto;
          }

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

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

      & .e-ul {
        @include ul-size;
        min-width: $cmenu-min-width;
        @if $skin-name == 'tailwind3' {
          font-weight: $menu-ul-font-weight;
        }

        & .e-menu-item {
          @include li-size;
          display: list-item;

          & .e-caret {
            font-size: $submenu-caret-font-size;
            @if $skin-name == 'fluent2' {
              padding: $menu-container-caret-padding;
            }
          }
        }
      }
    }

    &.e-menu-icon-right {
      & .e-menu-header .e-menu-icon {
        float: right;
      }

      & .e-menu-header .e-menu-title {
        padding: $menu-header-icon-padding;
      }
    }

    & .e-menu-header {
      display: none;
      font-family: $menu-header-font-family;
      font-size: $menu-header-font-size;
      // font-weight: $font-weight;
      height: $menu-li-height;
      line-height: $menu-li-line-height;
      text-align: left;
      white-space: nowrap;
      @if $skin-name == 'tailwind3' {
        font-weight: $menu-container-ul-font-weight;
      }

      & .e-menu-title,
      & .e-menu-icon {
        display: inline-block;
        line-height: $menu-inherit-line-height;
      }

      & .e-menu-icon {
        cursor: pointer;
        float: left;
        outline: none;
        padding: $menu-header-icon-padding;
      }
    }

    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
      @if $skin-name == 'bootstrap4' {
        padding: $menu-scroll-padding $menu-hscroll-nav-size;
      }
      @else {
        padding: $menu-scroll-padding $menu-hscroll-nav-size;
      }

      & .e-scroll-nav {
        width: $menu-hscroll-nav-size;
        @if $skin-name == 'tailwind3' {
          min-height: 38px;
        }

        &:focus,
        &:hover {
          border: $menu-hscroll-nav-interaction-border;
        }

        &.e-scroll-right-nav {
          border-left: $menu-srollbar-ul-border;
        }

        &.e-scroll-left-nav {
          border-right: $menu-srollbar-ul-border;
        }
      }

      & .e-hscroll-bar {
        overflow-y: hidden;
      }
    }

    & .e-scroll-nav .e-nav-arrow {
      font-size: $menu-scroll-nav-icon-size;

      &.e-nav-left-arrow,
      &.e-nav-up-arrow {
        transform: rotate(180deg);
      }
    }

    &.e-rtl .e-scroll-nav .e-nav-arrow {
      &.e-nav-left-arrow {
        transform: rotate(0deg);
      }

      &.e-nav-right-arrow {
        transform: rotate(180deg);
      }
    }

    &.e-popup.e-menu-popup {
      border: $cmenu-ul-border;
      box-shadow: $cmenu-sub-ul-box-shadow;
      overflow: hidden;
      position: absolute;
    }

    & .e-menu-vscroll.e-vscroll {
      &:not(.e-scroll-device) {
        padding: $menu-vscroll-nav-padding $menu-scroll-padding;
      }

      &.e-scroll-device {
        & .e-scroll-nav.e-scroll-down-nav {
          transform: none;
          width: 100%;

          & .e-nav-down-arrow {
            transform: none;
          }
        }
      }

      & .e-vscroll-bar {
        height: $menu-scroll-bar-height;
        width: inherit;

        & .e-vscroll-content {
          width: inherit;
        }
      }

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

    &.e-scrollable {
      display: block;

      & .e-menu {
        display: block;
        overflow: auto;
      }
    }

    &.e-contextmenu-container {
      height: $menu-container-height;

      .e-menu-vscroll ul.e-ul {
        width: inherit;
      }

      .e-menu-vscroll {
        border: $cmenu-ul-border;
        box-shadow: $cmenu-sub-ul-box-shadow;
      }
    }
  }

  .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu {
    &.e-vertical {
      & .e-blankicon {
        padding-left: $menu-blank-icon;
      }
    }
  }

  .e-rtl.e-menu-wrapper ul,
  .e-rtl.e-menu-container ul {
    & .e-menu-item {
      @include rtl-li-layout;
      text-align: right;

      & .e-menu-icon {
        margin-left: $menu-icon-margin-right;
      }

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

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

    &.e-ul {
      & .e-menu-item {
        @include rtl-li-size;
      }
    }
  }

  .e-rtl.e-menu-container:not(.e-hamburger) .e-menu {
    &.e-vertical {
      & .e-blankicon {
        padding-right: $menu-blank-icon;
      }
    }
  }

  .e-menu-wrapper.e-hamburger,
  .e-menu-container.e-hamburger {
    border: $menu-hamburger-border;
    display: block;
    position: relative;

    & .e-menu-header:not(.e-vertical) {
      border: $menu-ul-border;
      display: block;
    }

    & .e-popup.e-menu-popup {
      border: $menu-hamburger-border;
      border-radius: $menu-hamburger-border-radius;
      box-shadow: none;
      display: block;
      position: relative;
      width: 100%;
    }

    & ul {
      &.e-menu {
        border: $menu-ul-border;
        overflow-y: auto;
        width: 100%;

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

        & .e-menu-item {
          text-indent: $menu-li-text-indent;
          @if $skin-name == 'Material3' {
            border-radius: $menu-item-border-radius;
          }

          &.e-blankicon {
            text-indent: $menu-li-text-indent + $menu-icon-font-size-text-indent + $menu-icon-margin-right-text-indent;
          }

          & .e-menu-icon {
            display: inline;
            text-indent: 0;
          }

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

        /* stylelint-disable */
		    & .e-menu-item[aria-expanded = "true"] .e-caret {
			    -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
			    -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
          text-indent: 0;
		    }
		
		    & .e-menu-item[aria-expanded = "false"] .e-caret {
			    -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
          text-indent: 0;
        }
        /* stylelint-enable */
      }

      &.e-menu:not(.e-vertical) {
        border-top: $menu-hamburger-border;
        display: block;
        padding: $menu-hamburger-padding;
        position: absolute;
      }

      &.e-ul {
        font-size: $menu-font-size;
        padding: $menu-hamburger-padding;

        & .e-menu-item {
          line-height: $menu-li-line-height;
          text-indent: inherit;

          &.e-blankicon {
            padding: $menu-hamburger-padding;
            text-indent: inherit;
          }

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

          &.e-selected {
            & .e-menu-icon,
            & .e-caret {
              @if $skin-name == 'bootstrap5.3' {
                color: $flyout-text-color-pressed;
              }
            }
          }
        }
      }

      & .e-menu-item {
        display: list-item;
        height: $menu-auto-height;
        padding: $menu-hamburger-padding;

        &.e-menu-caret-icon,
        &.e-blankicon {
          padding: $menu-hamburger-padding;
        }

        & .e-menu-url {
          display: inline-block;
          min-width: 120px;
          text-indent: 0;
          width: 100%;
        }

        &.e-separator {
          @include separator-size;
        }
      }
    }
    @if $skin-name == 'tailwind3' {
      .e-menu-header {
        background: $content-bg-color-alt1;
        .e-menu-icon {
          font-size: $menu-bigger-scroll-nav-icon-size;
        }
      }
      ul {
        background: $content-bg-color;
        .e-menu-item {
          & .e-menu-icon,
          & .e-caret {
            font-size: $menu-bigger-scroll-nav-icon-size;
          }
        }
      }
      .e-ul {
        font-weight: $menu-container-ul-font-weight;
      }
    }
  }

  .e-rtl.e-menu-wrapper.e-hamburger ul,
  .e-rtl.e-menu-container.e-hamburger ul {
    & .e-menu-item {
      & .e-menu-caret-icon {
        padding-left: $menu-hamburger-padding;
        padding-right: $menu-hamburger-padding;
      }

      & .e-menu-icon {
        margin-left: $menu-hamburger-rtl-icon-margin-left;
        text-indent: inherit;
      }

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

  .e-menu-container .e-vscroll ul {
    position: relative;
  }
}