@use 'ej2-base/styles/common/mixin' as *;
@mixin bigger-rtl-blank-icon {
  padding-left: $cmenu-caret-blank-icon;

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

@mixin bigger-ul-size {
  font-size: $cmenu-bigger-font-size;
  padding: $cmenu-ul-bigger-padding;
  white-space: nowrap;
}

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

  &.e-menu-caret-icon {
    @if $skin-name == 'fluent2' {
      padding: $cmenu-caret-icon-padding;
    }
  }

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

  & .e-caret {
    line-height: $cmenu-bigger-li-line-height;
    @if $skin-name == 'fluent2' {
      margin: $cmenu-bigger-caret-icon-margin;
    }
  }

  &.e-separator {
    height: $menu-auto-height;
    line-height: $menu-normal-line-height;
  }
}

@include export-module('menu-bigger') {
  .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 .e-menu-item {
      line-height: $menu-bigger-li-line-height;
      padding: $menu-bigger-li-padding;
      height: $menu-bigger-li-height;

      & .e-menu-icon {
        font-size: $menu-icon-bigger-font-size;
        line-height: $menu-bigger-li-line-height;
        margin-right: $menu-bigger-icon-margin-right;
        @if $skin-name == 'fluent2' {
          margin-bottom: $menu-bigger-icon-item-margin-bottom;
        }
      }

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

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

      & .e-menu-item  {
        @include bigger-li-size;
        @if $skin-name != 'fluent2' {
          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: $menu-padding-none $menu-bigger-hscroll-nav-size;

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

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

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

    &.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: $menu-bigger-icon-mrg-right;
      }

      & .e-caret {
        left: $menu-bigger-caret-right;
        margin-left: $menu-bigger-icon-margin-left;
        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;
          @if $skin-name == 'fluent2' {
            padding-right: $menu-bigger-caret-icon-padding-right;
          }
          @else {
            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-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: $menu-auto-height;
        line-height: $menu-bigger-li-line-height;
        padding: $menu-padding-none;
      }
    }
  }

  .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-line-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-menu-caret-icon {
            padding-right: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
          }

          & .e-caret {
            font-size: $menu-bigger-caret-font-size;
            right: $menu-bigger-caret-right;
          }
        }
      }
    }
    @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-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: $menu-padding-none;
        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: $menu-bigger-icon-margin-left;
          text-indent: inherit;
        }

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

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

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

  .e-bigger .e-menu-container .e-ul .e-menu-item .e-caret {
    @if $skin-name == 'fluent2' {
      padding: $menu-container-caret-padding;
    }
  }

  .e-bigger .e-menu-wrapper:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator),
  .e-bigger .e-menu-container:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator) {
    @if $skin-name == 'fluent2' {
      height: $menu-bigger-ul-item-height;
    }
    @else {
      height: $cmenu-bigger-li-height;
    }
  }

  .e-bigger .e-menu-wrapper:not(.e-hamburger) ul .e-menu-item,
  .e-bigger .e-menu-container:not(.e-hamburger) ul .e-menu-item {
    &.e-menu-caret-icon {
      padding-right: $menu-bigger-caret-li-padding;
    }
  }

  .e-bigger .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item,
  .e-bigger .e-menu-container.e-hamburger ul.e-menu .e-menu-item {
    padding: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
    height: $menu-auto-height !important; /* stylelint-disable-line declaration-no-important */
  }
}