$color-nav-bg: #FEFEFE;
$color-nav-bg-admin: #373d41;
$color-nav-bg-border: #494d62;
$color-nav-active-admin: #202529;
$color-nav-secondary: #a5a5a6;
.efly-nav-menu {
  z-index: 10000;
  width: 204px;
  height: 100%;
  font-size: $font-default;
  background: $color-nav-bg;
  position: relative;
  color: $color-text-primary;

  &.efly-nav-menu-icon {
    width: 60px;

    .efly-nav-menu-content {
      .efly-nav-menu-item {
        .efly-nav-menu-item-label {
          @include box();
          @include flex-center();
          padding-left: 0;

          .icon {
            margin-right: 0;
          }

          .efly-nav-menu-item-down {
            @include box();
            @include flex-center();
            position: relative;
            top: 0;
            right: 0;
            height: 100%;

            &.top {
              transform: rotate(270deg);
            }
          }
        }

        .efly-nav-menu-item-content{
          .efly-nav-menu-group{
            .efly-nav-menu-group-content{
              .efly-nav-menu-item-label{

                padding-left: 0 !important;
              }
            }
          }
        }

      }
    }
  }


  .efly-nav-menu-indent {
    width: 100%;
    //padding: 0 $space-mini;
    @include box-sizing();

    div {
      @include box();
      @include flex-center();
      height: 40px;
      border-bottom: 1px solid #EDF2F8;
      cursor: pointer;
    }
  }

  .efly-nav-menu-content {

    .efly-nav-menu-item {
      width: 100%;
      @include box-sizing();

      .efly-nav-menu-item-label {
        @include box();
        @include flex-align-center();
        width: 100%;
        height: 50px;
        position: relative;
        padding-left: $space-default;
        @include box-sizing();
        cursor: pointer;

        &.not-hover {
          &:hover {
            background: $color-nav-bg;
            color: $color-text-primary
          }
        }

        &.active {
          &:hover {
            background: $color-light-primary;
            color: $color-primary;
          }
        }

        &:hover, &.hover{
          background: $color-light-primary;
          color: $color-primary !important;
        }

        &:active, &.active {
          color: $color-primary !important;
        }

        > .icon {
          margin-right: $space-mini;

        }

        .efly-nav-menu-item-down {
          @include box();
          @include flex-center();
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          color: $color-text-regular;
          font-size: $font-small;

          &.top {
            transform: rotate(270deg);
          }
        }

      }

      .efly-nav-menu-item-content {

        .efly-nav-menu-item-label {
          color: $color-text-nav;
          padding-left: $space-bigger;
        }

        .efly-nav-menu-item-content {
          position: absolute;
          top: 0;
          height: 100%;
          left: 100%;
          width: 150px;
          box-shadow: 2px 0 10px #ddd;
          border: 1px solid #d7e9fc;
          overflow: hidden;
          z-index: 100;
          background: #fdfdfd;
        }
      }

      .efly-nav-menu-group {

        .efly-nav-menu-group {

          height: 100%;
          background: $color-white;

          .efly-nav-menu-group-label {
            width: 100%;
            padding: 0 $space-mini;
            @include box-sizing();

            div {
              @include box();
              @include flex-center();
              width: 100%;
              height: 40px;
              border-bottom: 1px solid #EDF2F8;

              .icon {
                margin-right: $space-mini;
              }
            }
          }


          .efly-nav-menu-group-content {
            height: calc(100% - 41px);
            overflow-y: auto;
            background: #FEFEFE;

            .efly-nav-menu-item {


              .efly-nav-menu-item-label {
                padding: 0;
                @include flex-center();
              }
            }


          }
        }
      }


    }
  }


}

.efly-nav-menu-admin {
  width: 190px;
  height: 100%;
  font-size: $font-default;
  color: $color-white;
  position: relative;
  background: $color-nav-bg-admin;

  .efly-nav-menu-indent {
    width: 100%;
    padding: 0 $space-mini;
    @include box-sizing();

    div {
      @include box();
      @include flex-center();
      height: 40px;
      border-bottom: 1px solid $color-nav-bg-border;
      cursor: pointer;
    }
  }

  .efly-nav-menu-content {
    z-index: 10000;
    .efly-nav-menu-item {
      width: 100%;

      .efly-nav-menu-item-label {
        @include box();
        @include flex-align-center();
        width: 100%;
        height: 50px;
        position: relative;
        padding-left: $space-default;
        @include box-sizing();
        cursor: pointer;

        .icon {
          margin-right: $space-mini;
        }

        &:hover, &.hover, &:active, &.active {
          background: $color-nav-active-admin;
          color: $color-primary;
        }
      }

      .efly-nav-menu-item-content {
        z-index: 10000;
        position: absolute;
        left: 100%;
        top: 0;
        height: 100%;
        width: 300px;
        background: $color-nav-active-admin;
        padding: $space-mini;
        @include box-sizing();

        .efly-nav-menu-group {
          .efly-nav-menu-group-title {
            @include box();
            @include flex-justify-start();
            @include flex-align-center();
            height: 40px;
            color: $color-nav-secondary;
            border-bottom: 1px solid $color-nav-bg-border;

            .icon {
              margin-right: $space-xs;
            }
          }

          .efly-nav-menu-group-content {
            @include box();
            @include flex-align-center();
            flex-wrap: wrap;

            .efly-nav-menu-item {
              width: calc(50% - 3px);
              margin: $space-xs $space-xs 0 0;

              .efly-nav-menu-item-label {
                height: 40px;
                background: $color-nav-bg-admin;
              }

              &:nth-child(2n-2) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }


  &.efly-nav-menu-stretch {
    width: 60px;

    .efly-nav-menu-content {
      .efly-nav-menu-item {
        .efly-nav-menu-item-label {
          @include box();
          @include flex-center();
          padding-left: 0;

          .icon {
            margin-right: 0;
          }
        }
      }
    }
  }
}