/*=========================================================================================
	File Name: vertical-compact-menu.scss
	Description: A compact size menu provides more space to content part with open and hide support.
	It support light & dark version, filpped layout, right side icons, native scroll and borders menu
	item seperation.
	----------------------------------------------------------------------------------------
	Item Name: CryptoDash - Free Cryptocurrency Dashboard Template
	Version: 1.0
	Author: ThemeSelection
	Author URL: https://themeselection.com/
==========================================================================================*/

// Core variables and mixins
@import "../../../bootstrap/functions";
@import "../../../bootstrap/mixins";
@import "../../../bootstrap-extended/mixins";

// Core variables and mixins overrides
@import "../../variables/variables";
@import "../../variables/components-variables";

// Overrides user variable
@import "../../../../../assets/scss/variables/variables";
@import "../../../../../assets/scss/variables/components-variables";

// Import first main menu mixin
@import "../../mixins/main-menu-mixin";

// Vertical Compact Menu
//=========================
.vertical-compact-menu {
  .content {
    @include main-menu-width($compact-menu-width);
  }
  .navbar {
    .navbar-header {
      @include menu-navbar-width($compact-menu-width);
    }
    .navbar-container {
      // @include main-menu-width($compact-menu-width);
    }
    &.navbar-brand-center {
      .navbar-container {
        @include main-menu-width(0);
      }
      .navbar-header {
        @include menu-navbar-width(auto);
      }
    }
  }
  .main-menu {
    width: $compact-menu-width;
    left: 0;
    margin: 0.8rem;

    .navigation-brand {
      display: inline-block;
      padding: 2.15rem;
      img {
        width: 70px;
      }
    }
    // template specifix large profile image with center aligned
    .main-menu-header {
      .user-content {
        .media-left {
          display: block;
          text-align: center;
          padding: 0;
          .avatar-md {
            width: 60px;
            text-align: center;
          }
        }
        .media-body {
          display: block;
          text-align: center;
          margin: 0;
          padding: 0;
          width: auto;
          margin-top: 0.5rem;
        }
        .media-right {
          display: none;
        }
      }
    }
    //content menu mixin
    // $menu-expanded-width: a common with for all popout menu
    @include menu-content(
      $menu-expanded-width,
      $compact-menu-width,
      $menu-light-color,
      $menu-light-bg
    );

    .navigation {
      overflow: visible;

      > li.navigation-header {
        padding: 12px 20px;
        text-align: center;
        font-weight: 800;
        .ft-minus {
          visibility: hidden;
          display: none;
          opacity: 0;
        }
      }

      > li {
        > a {
          width: auto;
          padding: 0.3rem 1rem;
          text-align: center;
          // transition: visibility .25s,opacity .25s;

          > i {
            display: block;
            width: 100%;
            margin: 0 auto;
            font-size: 2.2rem;
            margin: 0.2rem 0 0.8rem 0;
            text-align: center;

            &:before {
              // transition: 200ms ease all;
            }
          }

          > span {
            vertical-align: middle;
            text-transform: uppercase;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 1px;
            visibility: hidden;
            display: inherit;
            margin-bottom: 0.75rem;
            &:hover {
              visibility: visible;
            }
          }
        }
        &.hover {
          & > ul {
            display: none;
          }

          > a {
            //span is requires as the compact menu has in
            > span {
              visibility: visible;
              opacity: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin: 0 auto 10px;
            }
          }
        }
      }
    }

    .mTSWrapper {
      overflow: visible;
    }
  }

  // Compact menu open
  &.menu-open {
    .main-menu {
      opacity: 1;
      transition: transform 0.25s, opacity 0.25s, top 0.35s, height 0.35s;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000;
    }
    .content,
    .footer,
    .header-navbar {
      @include main-menu-width($compact-menu-width + 10);
    }
    //Brand center content expanded
    .navbar-brand-center {
      .content,
      .footer,
      .header-navbar {
        @include main-menu-width(0);
      }
    }
    &.boxed-layout {
      .main-menu {
        transform: translate3d(($compact-menu-width), 0, 0);
      }
    }
  }

  // Compact menu hide
  &.menu-hide {
    .content {
      @include main-menu-width(0);
    }
    .main-menu {
      opacity: 0;
      transition: transform 0.25s, opacity 0.25s, top 0.35s, height 0.35s;
      transform: translate3d(-($compact-menu-width), 0, 0);
      backface-visibility: hidden;
      perspective: 1000;
    }
    //Brand center content collapsed
    .content,
    .footer,
    .header-navbar {
      @include main-menu-width(0);
    }
    .navbar-brand-center {
      .content,
      .footer,
      .header-navbar {
        @include main-menu-width(0);
      }
    }
  }

  // Compact menu flipped layout specific scss
  &.menu-flipped {
    .content {
      @include vertical-flipped-menu($compact-menu-width);
    }
    // Main menu flipped
    .main-menu {
      right: 0;
      left: inherit;
      ul.menu-content {
        right: $compact-menu-width;
        left: inherit;
      }
      .navigation {
        > li {
          > ul {
            right: $compact-menu-width;
            left: inherit;
          }
        }
      }
    }
    //Navbar expanded flipped
    .navbar {
      .navbar-header {
        float: right;
      }
      .navbar-container {
        @include vertical-flipped-menu($compact-menu-width);
      }
    }
    &.menu-open {
      &.boxed-layout {
        .main-menu {
          transform: translate3d(-($compact-menu-width), 0, 0);
        }
      }
    }
    &.menu-hide {
      .content {
        @include vertical-flipped-menu(0);
      }
      .main-menu {
        @include vertical-menu-transform-show($compact-menu-width);
      }
    }
  }
}

// Initially menu & content width for lg and up screen
@include media-breakpoint-up(lg) {
  body {
    &.vertical-compact-menu {
      .main-menu {
        width: $compact-menu-width;
      }
      .navbar {
        .navbar-header {
          width: $compact-menu-width;
        }
      }
      .content,
      .footer,
      .header-navbar {
        @include main-menu-width($compact-menu-width + 10);
      }
    }
  }
}

// Initially menu & content width for md and down screen
@include media-breakpoint-down(md) {
  body {
    &.vertical-compact-menu {
      // .main-menu{  // removed due to  https://app.asana.com/0/463259367804075/562070885255453
      // 	width: 0;
      // }
      .navbar {
        .navbar-header {
          width: 0;
        }
      }
      .content,
      .footer,
      .header-navbar {
        @include main-menu-width(0);
      }
    }
  }
}

// Initially menu & content width for sm and down screen
@include media-breakpoint-down(sm) {
  body {
    &.vertical-compact-menu {
      .content,
      .footer {
        @include main-menu-width(0);
      }
    }
  }
}

// Collapsed menu RTL
[data-textdirection="rtl"] body.vertical-layout {
  &.vertical-compact-menu {
    .main-menu .navigation > li > a > span {
      display: none;
    }
    .main-menu .navigation > li > a > span {
      display: table !important;
    }
  }
}

// Import vertical-overlay-menu.scss for small screen support
@import "vertical-overlay-menu.scss";
