@import '../context-menu/layout-mixin.scss';
@include export-module('menu-layout') {
  
  /*! menu layout */
  .e-menu-wrapper,
  .e-menu-container {
    border: $menu-ul-border;
    border-radius: $cmenu-ul-border-radius;
    display: inline-block;
    line-height: 0;

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

    @at-root {
      & ul {
        @include ul-layout;
        font-size: $menu-font-size;
        padding: $menu-ul-padding;
        text-align: left;
        white-space: nowrap;

        &.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-height;
          padding: $menu-li-padding;
          vertical-align: top;
          white-space: nowrap;

          & .e-menu-icon {
            font-size: $menu-icon-font-size;
            height: auto;
            line-height: $menu-li-height;
            margin-right: $menu-icon-margin-right;
            text-align: center;
            margin-bottom: 4px;
          }

          & .e-caret {
            font-size: $menu-caret-font-size;
            height: auto;
            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
              line-height: $menu-icon-li-height;
            }
            @else {
              line-height: $menu-li-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;
          }
        }
      }

      & .e-ul {
        @include ul-size;
        min-width: $cmenu-min-width;

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

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

    &.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: $font-family;
      font-size: $menu-icon-font-size;
      font-weight: $font-weight;
      height: $menu-li-height;
      line-height: $menu-li-height;
      text-align: left;
      white-space: nowrap;

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

      & .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: 4px $menu-hscroll-nav-size;
      }
      @else {
        padding: 0 $menu-hscroll-nav-size;
      }

      & .e-scroll-nav {
        width: $menu-hscroll-nav-size;

        &:focus,
        &:hover {
          border: 0;
        }

        &.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 {
        transform: rotate(180deg);
      }

      &.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-size 0;
      }

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

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

      & .e-vscroll-bar {
        height: 100%;
        width: inherit;

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

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

    &.e-scrollable {
      display: block;

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

    &.e-contextmenu-container {
      height: 1px;

      .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-bigger .e-menu-wrapper ul,
  .e-bigger.e-menu-wrapper ul,
  .e-bigger .e-menu-container ul,
  .e-bigger.e-menu-container ul {
    font-size: $menu-bigger-font-size;

    & .e-menu-item {
      height: $menu-bigger-li-height;
      line-height: $menu-bigger-li-height;
      padding: $menu-bigger-li-padding;

      & .e-menu-icon {
        font-size: $menu-icon-bigger-font-size;
        line-height: $menu-bigger-li-height;
        margin-right: $menu-bigger-icon-margin-right;
      }

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

      & .e-caret {
        font-size: $menu-bigger-caret-font-size;
        @if $skin-name == 'bootstrap5' {
          line-height: $menu-bigger-li-icon-height;
        }
        @else {
          line-height: $menu-bigger-li-height;
        }
        right: $menu-bigger-caret-right;
      }

      &.e-separator {
        padding: $menu-separator-bigger-padding;
      }
    }

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

      &.e-vertical {
        & .e-menu-item {
          &.e-separator {
            @include separator-bigger-size;
          }
        }
      }
    }

    &.e-ul {
      @include bigger-ul-size;
      max-width: $cmenu-bigger-max-width;
      min-width: $cmenu-bigger-min-width;

      & .e-menu-item  {
        @include bigger-li-size;
        padding: $cmenu-li-padding;
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          padding: $menu-bigger-li-padding;
        }

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

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

        & .e-menu-icon {
          @if $skin-name == 'tailwind' {
            margin-right: $menu-icon-bigger-margin-right;
          }
          @else {
            margin-right: $cmenu-icon-margin-right;
          }
        }
      }
    }
  }

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

  .e-bigger .e-menu-wrapper,
  .e-bigger.e-menu-wrapper,
  .e-bigger .e-menu-container,
  .e-bigger.e-menu-container {
    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
      padding: 0 $menu-bigger-hscroll-nav-size;

      & .e-scroll-nav {
        width: $menu-bigger-hscroll-nav-size;
      }
    }

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

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

    &.e-menu-popup {
      box-shadow: $cmenu-parent-ul-box-shadow;
    }

    & .e-scroll-nav .e-icons {
      font-size: $menu-bigger-scroll-nav-icon-size;
    }
  }

  .e-bigger .e-rtl.e-menu-wrapper ul,
  .e-bigger.e-rtl.e-menu-wrapper ul,
  .e-bigger .e-rtl.e-menu-container ul,
  .e-bigger.e-rtl.e-menu-container ul {
    & .e-menu-item {
      text-align: right;

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

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

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

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

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

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

        &.e-blankicon {
          @include bigger-rtl-blank-icon;
        }
      }
    }
  }

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

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

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

    & .e-popup.e-menu-popup {
      border: 0;
      border-radius: 0;
      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;

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

          & .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: 0;
        display: block;
        padding: 0;
        position: absolute;
      }

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

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

          &.e-blankicon {
            padding: 0;
            text-indent: inherit;
          }

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

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

        &.e-menu-caret-icon {
          padding: 0;
        }

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

        &.e-blankicon {
          padding: 0;
        }

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

  .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: 0;
        padding-right: 0;
      }

      & .e-menu-icon {
        margin-left: 0;
        text-indent: inherit;
      }

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

  .e-bigger .e-menu-wrapper.e-hamburger ul,
  .e-bigger.e-menu-wrapper.e-hamburger ul,
  .e-bigger .e-menu-container.e-hamburger ul,
  .e-bigger.e-menu-container.e-hamburger ul {
    & .e-ul {
      max-width: 100%;

      & .e-menu-item {
        height: auto;
        line-height: $menu-bigger-li-height;
        padding: 0;
      }
    }
  }

  .e-bigger .e-menu-wrapper.e-hamburger,
  .e-bigger.e-menu-wrapper.e-hamburger,
  .e-bigger .e-menu-container.e-hamburger,
  .e-bigger.e-menu-container.e-hamburger {
    & .e-menu-header {
      font-size: $menu-icon-bigger-font-size;
      height: $menu-bigger-li-height;
      line-height: $menu-bigger-li-height;
    }

    & ul.e-menu {
      & .e-menu-item {
        text-indent: $menu-bigger-li-text-indent;

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

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

        & .e-menu-item {
          text-indent: inherit;

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

  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,
  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger,
  .e-bigger .e-rtl.e-menu-container.e-hamburger,
  .e-bigger.e-rtl.e-menu-container.e-hamburger {
    & ul.e-menu {
      & .e-menu-item {
        padding: 0;
        text-indent: $menu-bigger-li-text-indent;

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

        & .e-menu-icon {
          margin-left: 0;
          text-indent: inherit;
        }

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

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

      & .e-ul {
        & .e-menu-item {
          text-indent: inherit;
        }
      }
    }
  }
}
