@import '../../../../assets/sass/variable';

:host {
  display: block;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  width: inherit;
  -webkit-overflow-scrolling: touch;

  .main-menu {
    width: inherit;
    padding-top: 20px;

    > ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      .menu-item {
        position: relative;

        &:after {
          background: menu(accent-color);
          bottom: 0;
          content: '';
          position: absolute;
          right: 100%;
          top: 0;
          transition: transform .2s $animation;
          width: 4px;

          .rtl & {
            left: 100%;
            right: auto;
          }
        }
        .item-link {
          align-items: center;
          background: menu(item-bg);
          color: menu(item-color);
          display: flex;
          font-size: 1rem;
          font-weight: 400;
          justify-content: space-between;
          min-height: ($module-rem * 4);
          padding: ($module-rem / 2) ($module-rem * 1.5);
          position: relative;
          text-decoration: none;
          transition:
            background .2s $animation,
            color .2s $animation;

          .text {
            flex-grow: 2;
            flex-shrink: 1;
            margin: 0 ($module-rem / 2);
          }
          .item-badge {
            background: menu(badge-bg);
            border-radius: 8px;
            color: menu(badge-color);
            float: right;
            font-size: 10px;
            line-height: 1;
            margin: 0 ($module-rem / 2);
            padding: 3px 6px;
          }
          .icon {
            color: menu(icon-color);
            font-size: 15px;
            margin: 0 0 0 ($module-rem / 2);
            min-width: ($module-rem * 2);
            text-align: center;

            .rtl & {
              margin: 0 ($module-rem / 2) 0 0;
            }
            .icon-wrap {
              align-items: center;
              border-radius: menu(icon-br);
              display: flex;
              height: ($module-rem * 3);
              justify-content: center;
              margin: 0 auto;
              width: ($module-rem * 3);
            }
          }
          .caret {
            @extend %fa;
            margin: 0 ($module-rem / 4);
            transition: transform .1s $animation;

            &:before {
              content: '\f105';
            }
          }
          &:hover {
            background: menu(item-hover-bg);
            color: menu(item-hover-color);

            .icon {
              color: menu(icon-hover-color);
            }
          }
        }
        &.menu-item-group {
          &:after {
            display: none;
          }
          .group-title {
            color: menu(item-group-color);
            display: block;
            font-size: .8rem;
            font-weight: 600;
            line-height: ($main-lh / .8);
            padding: ($module-rem * 1.5) ($module-rem * 2) ($module-rem / 2);
            text-transform: uppercase;
          }
        }
        .sub {
          background: menu(sub-bg);
          list-style-type: none;
          overflow: hidden;
          margin: 0;
          max-height: 0;
          padding: 0;
          transition: max-height .1s $animation;

          .menu-item {
            .item-link {
              padding-left: ($module-rem * 2);
              padding-right: ($module-rem * 2);
            }
            &:first-child {
              > .item-link {
                &:before {
                  border-top: 1px solid transparent;
                  content: '';
                  left: 0;
                  position: absolute;
                  right: 0;
                  top: 0;
                  transition: border .2s $animation;
                }
              }
            }
          }
        }
        &:hover {
          &:after {
            transform: translateX(4px);

            .rtl & {
              transform: translateX(-4px);
            }
          }
        }
        &.active {
          &:after {
            transform: translateX(4px);

            .rtl & {
              transform: translateX(-4px);
            }
          }
          > .item-link {
            background: menu(item-active-bg);
            color: menu(item-active-color);
            font-weight: bold;

            .icon {
              color: menu(icon-active-color);
            }
          }
        }
        &.has-sub {
          position: relative;

          > .item-link {
            position: relative;

            .caret {
              display: block;
            }
          }
          &.active {
            > .item-link {
              .caret {
                transform: rotate(90deg);
              }
            }
            > .sub {
              max-height: 1000px;

              > .menu-item {
                &.active {
                  &:first-child {
                    > .item-link {
                      &:before {
                        border-top-color: menu(separator);
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &.disabled {
          pointer-events: none;
        }
      }
    }

    //Style 2
    .menu-style-2 & {
      > ul {
        .menu-item {
          .item-link {
            .icon {
              margin-left: 0;
              margin-right: ($module-rem / 2);
              order: 1;
            }
            .text {
              order: 2;
            }
            .item-badge {
              order: 3;
            }
            .caret {
              height: 11px;
              order: 4;
              position: relative;
              width: 11px;

              &:before,
              &:after {
                background: menu(item-color);
                content: '';
                display: block;
                height: 1px;
                left: 0;
                position: absolute;
                top: 5px;
                transition: transform .2s $animation;
                width: 100%;
              }
              &:after {
                transform: rotate(90deg) scaleX(1);
              }
            }
          }
          &.has-sub {
            &.active {
              > .item-link {
                .caret {
                  transform: rotate(0deg);

                  &:after {
                    transform: rotate(90deg) scaleX(0);
                  }
                }
              }
            }
          }
        }
      }
    }
    .menu-style-2.rtl & {
      > ul {
        .menu-item {
          .item-link {
            .icon {
              margin-left: ($module-rem / 2);
              margin-right: 0;
            }
          }
        }
      }
    }

    //Style 3
    .menu-style-3 & {
      > ul {
        .menu-item {
          &:after {
            display: none;
          }
          .item-link {
            .icon {
              margin-right: ($module-rem / 2);
              margin-left: 0;
              order: 1;
            }
            .text {
              order: 2;
            }
            .item-badge {
              order: 3;
            }
            .caret {
              order: 4;
            }
          }
          .sub {
            position: relative;

            &:before {
              border-left: 1px dashed menu(sub-separator);
              bottom: ($module-rem * 2);
              content: '';
              left: ($module-rem * 3);
              margin-left: -1px;
              position: absolute;
              top: 0;
              z-index: 2;
            }
            .menu-item {
              .item-link {
                padding-left: ($module-rem * 5);
                position: relative;

                &:before {
                  border-top: 1px dashed menu(sub-separator);
                  content: '';
                  left: ($module-rem * 3);
                  margin-left: -1px;
                  position: absolute;
                  top: ($module-rem * 2);
                  width: ($module-rem * 1.6);
                  z-index: 2;
                }
              }
            }
          }
        }
      }
    }
    .menu-style-3.rtl & {
      > ul {
        .menu-item {
          .item-link {
            .icon {
              margin-left: ($module-rem / 2);
              margin-right: 0;
            }
          }
          .sub {
            &:before {
              left: auto;
              right: ($module-rem * 3);
            }
            .menu-item {
              .item-link {
                padding-left: ($module-rem * 2);
                padding-right: ($module-rem * 5);

                &:before {
                  left: auto;
                  right: ($module-rem * 3);
                }
              }
            }
          }
        }
      }
    }

    //Style 4
    .menu-style-4 & {
      > ul {
        .menu-item {
          &:after {
            display: none;
          }
          .item-link {
            .icon {
              margin-right: ($module-rem / 2);
              margin-left: 0;
              order: 1;
            }
            .text {
              order: 2;
            }
            .item-badge {
              order: 3;
            }
            .caret {
              order: 4;
            }
          }
          .sub {
            position: relative;

            &:before {
              border-left: 1px solid menu(sub-separator);
              bottom: ($module-rem * 2);
              content: '';
              left: ($module-rem * 3);
              margin-left: 0;
              position: absolute;
              top: -($module-rem * .5);
              z-index: 2;
            }
            .menu-item {
              .item-link {
                padding-left: ($module-rem * 4.5);
                position: relative;

                &:before {
                  background: menu(sub-separator);
                  border-radius: 50%;
                  content: '';
                  height: 5px;
                  left: ($module-rem * 3);
                  margin: -2.5px 0 0 -2px;
                  position: absolute;
                  top: ($module-rem * 2);
                  width: 5px;
                  z-index: 2;
                }
              }
            }
          }
          &.active {
            > .item-link {
              &:before {
                background: menu(item-active-color) !important;
              }
            }
          }
        }
      }
    }
    .menu-style-4.rtl & {
      > ul {
        .menu-item {
          .item-link {
            .icon {
              margin-left: ($module-rem / 2);
              margin-right: 0;
            }
          }
          .sub {
            &:before {
              left: auto;
              right: ($module-rem * 3);
              margin-right: 0;
            }
            .menu-item {
              .item-link {
                padding-left: ($module-rem * 2);
                padding-right: ($module-rem * 4.5);

                &:before {
                  left: auto;
                  right: ($module-rem * 3);
                  margin: -2.5px -2px 0 0;
                }
              }
            }
          }
        }
      }
    }

    //Style 5
    .menu-style-5 & {

    }
  }
}