// TODO: seperate dashboard from this module
.content-wrapper {
  left:                                                     0%;
  height:                                                   100%;
  padding:                                                  0px;

  @include                                                  transition(all #{$sidebar-transition-speed} ease-out);
  @include media-breakpoint-down(md) {
    max-width:                                              calc(100% - #{$sidebar-collapse-size}) !important;
    width:                                                  calc(100% - #{$sidebar-collapse-size}) !important;
    flex:                                                   0 0 calc(100% - #{$sidebar-collapse-size}) !important;
  }
  @include media-breakpoint-down(sm) {
    max-width:                                              100% !important;
    width:                                                  100% !important;
    flex:                                                   0 0 100% !important;
    left:                                                   0px;
  }
  @at-root .app-sidebar-open & {
    @include media-breakpoint-down(md) {
      max-width:                                            75% !important;
      width:                                                75% !important;
      flex:                                                 0 0 75% !important;
      .dashboard-header {
        @include                                            transition(width #{$sidebar-transition-speed} ease-out);
        width:                                              75% !important;
      }
    }
    @include media-breakpoint-down(sm) {
      max-width:                                            100% !important;
      width:                                                100% !important;
      height:                                               100% !important;
      flex:                                                 0 0 100% !important;
      @include                                              transform(translate(calc(100% - #{$sidebar-collapse-size + 10}),0));
    }
    .sidebar-content-overlap {
      @include media-breakpoint-down(sm) {
        display:                                            block !important;
        height:                                             100%;
        background:                                         rgba(0,0,0,0.3);
        width:                                              100%;
        position:                                           fixed;
        z-index:                                            1999;
      }
    }
  }

  .dashboard-header {
    @include                                                transition(width #{$sidebar-transition-speed} ease-out);
    @include media-breakpoint-down(md) {
      @include                                              transition(width #{$sidebar-transition-speed} ease-out);
      max-width:                                            calc(100% - #{$sidebar-collapse-size}) !important;
      width:                                                calc(100% - #{$sidebar-collapse-size}) !important;
      flex:                                                 0 0 calc(100% - #{$sidebar-collapse-size}) !important;
    }

    @include media-breakpoint-down(sm) {
      max-width:                                            100% !important;
      width:                                                100% !important;
      flex:                                                 0 0 100% !important;
    }
  }

  @at-root .sidebar-toggle & {
    max-width:                                              calc(100% - #{$sidebar-collapse-size});
    flex:                                                   0 0 calc(100% - #{$sidebar-collapse-size}) !important;;
    .dashboard-header {
      @include                                              transition(width #{$sidebar-transition-speed} ease-out);
      width:                                                calc(100% - #{$sidebar-collapse-size});
    }
    @include media-breakpoint-down(sm) {
      max-width:                                            100% !important;
      width:                                                100% !important;
      flex:                                                 0 0 100% !important;
    }
  }
}


.sidebar {
  transition-property:                                      max-width, left, transform !important;
  padding:                                                  0px !important;
  margin:                                                   0px !important;

  @include                                                  transition(#{$sidebar-transition-speed} ease-out);
  @include media-breakpoint-down(md) {
    left:                                                   0% !important;
    max-width:                                              $sidebar-collapse-size !important;
    flex:                                                   0 0 $sidebar-collapse-size !important;
  }
  @include media-breakpoint-down(sm) {
    position:                                               absolute !important;
    //left:                                                 -70% !important;
    max-width:                                              calc(100% - #{$sidebar-mobile-open-content-width}) !important;
    width:                                                  calc(100% - #{$sidebar-mobile-open-content-width}) !important;
    height:                                                 100% !important;
    flex:                                                   0 0 calc(100% - #{$sidebar-mobile-open-content-width}) !important;
    @include                                                transform(translate(calc((100%) * -1),0));
  }
  @at-root .app-sidebar-open & {
    @include media-breakpoint-down(md) {
      max-width:                                            25% !important;
      width:                                                25% !important;
      flex:                                                 0 0 25% !important;
      left:                                                 0% !important;
    }
    @include media-breakpoint-down(sm) {
      max-width:                                            calc(100% - #{$sidebar-collapse-size + 10}) !important;
      width:                                                calc(100% - #{$sidebar-collapse-size + 10}) !important;
      flex:                                                 0 0 calc(100% - #{$sidebar-collapse-size + 10}) !important;
      //left:                                                 0% !important;
      @include                                              transform(translate(0,0));
    }
  }

  &-wrapper {
    background-color:                                       $sidebar-bg-color !important;
  }
  .sidebar-loader {
    background:                                             lighten($sidebar-branding-background, 10%);
  }
  .sidebar-toggle & {
    max-width:                                              $sidebar-collapse-size;
  }
  .branding {
    $sidebar-branding-background-lighter:                   lighten($sidebar-branding-background, 5%);

    background:                                             $sidebar-branding-background !important;
    height:                                                 $sidebar-branding-height !important;
    padding:                                                (($sidebar-branding-height - 20px) / 4);
    max-width:                                              100% !important;
    padding-left:                                           5% !important;
    text-align:                                             center !important;
    white-space:                                            nowrap !important;
    box-shadow:                                             0px 2px 8px 2px rgba(0,0,0,0.2);

    @include                                                transition(max-width .4s ease-out);
    .logo {
      margin:                                               6px (($sidebar-branding-height - 20px) / 2);
      .sidebar-toggle & {
        margin:                                             (($sidebar-branding-height - 20px) / 3);
      }
    }

    .sidebar-toggle & {
      padding-left:                                         0.5rem !important;
      text-align:                                           center !important;

      @include media-breakpoint-down(sm) {
        max-width:                                          100% !important;
      }
    }
  }

  .profile {
    width:                                                  100% !important;
    text-align:                                             center !important;
    min-height:                                             $sidebar-profile-height !important;
    padding:                                                map-get($spacers, $sidebar-profile-spacing) 0px;
    border-bottom:                                          solid 1px rgba(255,255,255,0.3);

    @include                                                transition(width #{$sidebar-transition-speed} ease-out);

    .profile-pic {
      position:                                             relative;
      width:                                                $sidebar-profile-size;
      height:                                               $sidebar-profile-size;
      image-orientation:                                    from-image;
      display:                                              inline-flex;

      .founder-badge {
        bottom:                                             -20px;
        left:                                               45px;
        position:                                           absolute;
        padding:                                            0.25em;
        z-index:                                            5;
      }

      @include media-breakpoint-down(md) {
        max-height:                                         $sidebar-profile-size !important;
      }

      @include media-breakpoint-between(sm, md) {
        width:                                              $sidebar-collapse-size;
        height:                                             $sidebar-collapse-size;
        padding:                                            5px;

        .founder-badge {
          display:                                          none;
        }
      }
      @at-root .app-sidebar-open & {
        @include media-breakpoint-between(sm, md) {
          height:                                           $sidebar-profile-size;
          width:                                            $sidebar-profile-size;

          .founder-badge {
            display:                                        none;
          }
        }
      }
      .sidebar-toggle & {
        @include media-breakpoint-up(md) {
          width:                                            $sidebar-collapse-size;
          height:                                           $sidebar-collapse-size;

          .founder-badge {
            display:                                        none;
          }
        }
      }
    }

    .info {
      @include                                              transition(height #{$sidebar-transition-speed} ease-out);
      overflow:                                             hidden;
      position:                                             relative;

      .info-inner {
        position:                                           relative;
        .member-info {
          color:                                            $white !important;
        }
        .sidebar-toggle & {
          @include media-breakpoint-up(md) {
            @include                                        transition(transform #{$sidebar-transition-speed} ease-out);
            z-index:                                        1000;
            padding-left:                                   83px;
            width:                                          auto;
            height:                                         auto;
            transform:                                      translateY(-2%) translateX(-10%) rotateY(-45deg);
            transform-origin:                               left center !important;
          }
        }
      }
      @at-root .app-sidebar-open & {
        @include media-breakpoint-between(sm, md) {
          display:                                          block;
        }
      }

      .sidebar-toggle & {
        @include media-breakpoint-up(md) {
          padding-left:                                     $sidebar-collapse-size;
          margin-top:                                       -100%;
          overflow:                                         hidden;
          height:                                           $sidebar-collapse-size + 10;
          width:                                            $sidebar-collapse-size;
          z-index:                                          1000;
        }

        &:hover {
          @include media-breakpoint-up(md) {
            overflow:                                       visible;
          }
          .info-inner {
            @include media-breakpoint-up(md) {
              width:                                        auto;
              transform:                                    translateY(0%) translateX(10%) rotateY(0deg);
              box-shadow:                                   0px 0px 21px rgba(0, 0, 0, .3) !important;
              z-index:                                      1000 !important;
              position:                                     absolute !important;
              opacity:                                      1 !important;
              font-size:                                    $font-size-base * 0.8 !important;
              visibility:                                   visible !important;
              border-radius:                                5px !important;
              background:                                   lighten($sidebar-bg-color, 10%)!important;
              padding:                                      15px !important;
              left:                                         $sidebar-collapse-size + 20 !important;
              margin-top:                                   10px;
              vertical-align:                               middle !important;
              > * {
                margin:                                     0px !important;
              }
              &:before {
                content:                                    '';
                width:                                      10px;
                height:                                     10px;
                display:                                    inline-block;
                position:                                   absolute;
                background:                                 lighten($sidebar-bg-color, 10%);
                z-index:                                    -3;
                transform:                                  rotate(45deg);
                top:                                        50%;
                left:                                       -5px;
                margin-top:                                 -5px;
              }
            }
          }
        }
      }

      @include media-breakpoint-between(sm, md) {
        display:                                            none;
      }
    }

    .sidebar-toggle & {

      @include                                              transition(width #{$sidebar-transition-speed} ease-out);
      @include media-breakpoint-up(md) {
        width:                                              $sidebar-collapse-size !important;
        height:                                             $sidebar-collapse-size + 20px !important;
        padding-bottom:                                     0px !important;
      }
      @include media-breakpoint-down(md) {
        overflow:                                           visible !important;
        width:                                              100% !important;
      }
    }
  }

  .menu {
    > a {
      $this:                                                &;
      $icon-padding-x:                                      ((($sidebar-collapse-size - $sidebar-icon-size)/2) - 2);

      max-width:                                            100% !important;
      padding:                                              $sidebar-menu-item-padding $icon-padding-x;
      display:                                              block !important;
      color:                                                $sidebar-menu-color !important;
      background-color:                                     transparent !important;
      border-left:                                          solid 3px transparent !important;
      white-space:                                          nowrap !important;

      @include                                              transition(all #{$sidebar-transition-speed} ease-out);
      @at-root .app-sidebar-open & {
        @include media-breakpoint-down(sm) {
          padding:                                          $sidebar-menu-item-padding * 1.2 $icon-padding-x !important;
          overflow:                                         hidden !important;
        }
      }

      span {
        vertical-align:                                     middle !important;
        white-space:                                        pre-wrap;
        display:                                            inline-block;
        margin-right:                                       10px;
        // Menu link text when toggled
        .sidebar-toggle & {
          visibility:                                       visible !important;
          opacity:                                          1 !important;
          border-radius:                                    0px !important;
          background:                                       transparent !important;
          @include                                          transition(#{$sidebar-transition-speed} ease-out);
          @include media-breakpoint-up(md) {
            @at-root .app-sidebar-open & {
              transform:                                    none;
            }
            transition-property:                            transform !important;
            box-shadow:                                     0px 0px 0px rgba(0, 0, 0, 0);
            font-size:                                      $font-size-base * 0.8 !important;
            transform:                                      translateY(-2%) translateX(-10%) rotateY(-45deg);
            transform-origin:                               left center !important;
            position:                                       relative !important;
            white-space:                                    nowrap;
            display:                                        inline;
            margin-right:                                   0px;
          }
          @include media-breakpoint-between(sm, md) {
            white-space:                                    nowrap;
            display:                                        inline-block;
            margin-right:                                   0px;
            margin-left:                                    14px;
          }
        }
        @include media-breakpoint-down(md) {
          white-space:                                      nowrap;
          display:                                          inline;
          margin-right:                                     0px;
        }
        @include media-breakpoint-down(sm) {
          white-space:                                      pre-wrap;
          display:                                          inline-block;
          margin-right:                                     0px;
          margin-left:                                      0px;
        }
      }
      .sidebar-toggle & {
        padding:                                            $sidebar-menu-item-padding/2 $icon-padding-x;
        overflow:                                           hidden !important;

        @include                                            transition(all #{$sidebar-transition-speed} ease-out);
        @include media-breakpoint-down(md) {
          padding:                                          $sidebar-menu-item-padding $icon-padding-x;
        }
      }
      .fa-icon {
        margin-right:                                       12px !important;
        width:                                              $sidebar-icon-size !important;
        height:                                             $sidebar-icon-size !important;
        vertical-align:                                     middle !important;

        .sidebar-toggle & {
          padding-left:                                     4px !important;
          margin-right:                                     $sidebar-icon-menu-margin-left !important;
        }
      }
      &.active {
        overflow:                                           hidden !important;
        background-color:                                   $sidebar-menu-active-bg !important;
        border-left-color:                                  $success !important;

        .fa-icon {
          fill:                                             $pink !important;
        }

        @at-root .app-sidebar-toggle.app-sidebar-open & {
          @include media-breakpoint-down(md) {
          //@media (max-height: 400px) {
            visibility:                                     visible !important;
            transform:                                      none;
          }
        }
      }
      &:hover {
        text-decoration:                                    none !important;
        background-color:                                   lighten($sidebar-bg-color, 10%) !important;
        border-left-color:                                  $primary !important;
        color:                                              $white;

        @at-root #{$this}.active:hover {
            background-color:                               lighten($sidebar-menu-active-bg, 10%) !important;;
        }
        // Menu link when mose over and toggled
        .sidebar-toggle & {
          text-decoration:                                  none !important;
          border-left-color:                                $primary !important;
          max-width:                                        100% !important;
        }
        span {
          // Menu link text when mouse over and toggled
          .sidebar-toggle & {
            @include media-breakpoint-up(md) {
              transform:                                    translateY(0%) translateX(10%) rotateY(0deg);
              box-shadow:                                   0px 0px 21px rgba(0, 0, 0, .3) !important;;
              z-index:                                      1000 !important;
              position:                                     absolute !important;
              opacity:                                      1 !important;
              font-size:                                    $font-size-base * 0.8 !important;
              visibility:                                   visible !important;
              border-radius:                                30px !important;
              background:                                   lighten($primary, 10%)!important;
              padding:                                      4px 15px !important;
              margin-left:                                  11px !important;
              vertical-align:                               middle !important;
              color:                                        $white !important;
            }
            @at-root .sidebar-toggle #{$this}.has-child:hover span {
              @include media-breakpoint-up(md) {
                display:                                    none !important;
              }
            }
          }
        }
        @at-root .app-sidebar-toggle.app-sidebar-open & {
          @include media-breakpoint-down(md) {
          //@media (max-height: 400px) {
            background:                                   transparent !important;
            margin-left:                                  0px !important;
            padding-left:                                 0px !important;
            transform:                                    none;
          }
        }
      }
    }
    > div {
      $this:                                                &;

      padding:                                              $sidebar-menu-item-padding !important;
      padding-left:                                         0px !important;

      > a {
        display:                                            block !important;
        margin-left:                                        $sidebar-icon-menu-margin-left !important;
        color:                                              $sidebar-menu-color !important;
        padding:                                            $sidebar-menu-item-padding !important;
        padding-left:                                       0px !important;
        white-space:                                        nowrap !important;
        text-decoration:                                    none !important;
        font-size:                                          $font-size-base * 0.9 !important;

        .fa-icon {
          margin-right:                                     $sidebar-icon-menu-margin-left / 3 !important;
          vertical-align:                                   middle !important;
        }
        &.active {
          color:                                            $success !important;
        }
        @at-root #{$this} a {
          .sidebar-toggle & {
            visibility:                                     hidden !important;
            @include                                        transition(transform #{$sidebar-transition-speed} ease-out);
            @include media-breakpoint-up(md) {
              transition-property:                          transform !important;
              transform:                                    translateY(-2%) translateX(-10%) rotateY(-45deg);
              transform-origin:                             left center !important;
              color:                                        $white !important;
            }
            @include media-breakpoint-down(md) {
              visibility:                                   visible !important;
              transform:                                    none;
            }
          }
        }
        @at-root #{$this}:hover a {
          .sidebar-toggle & {
            @include media-breakpoint-up(md) {
              transform:                                    translateY(0%) translateX(10%) rotateY(0deg);
              box-shadow:                                   0px 0px 21px rgba(0, 0, 0, .3);
              z-index:                                      1000 !important;
              opacity:                                      1 !important;
              font-size:                                    $font-size-base * 0.8 !important;
              visibility:                                   visible !important;
              border-radius:                                30px !important;
              background:                                   lighten($sidebar-bg-color, 10%);
              padding:                                      4px 15px !important;
              margin-left:                                  $sidebar-icon-menu-margin-left !important;
              vertical-align:                               middle !important;
              margin-bottom:                                10px !important;
            }
            &.active {
              color:                                        $success !important;
            }
          }
        }

        @at-root .app-sidebar-toggle.app-sidebar-open & {
          @include media-breakpoint-down(md) {
            visibility:                                     visible !important;
            transform:                                      none;
          }
        }
        @include media-breakpoint-down(md) {
          transform:                                        none;
          transform-origin:                                 initial !important;
        }
      }
      .sidebar-toggle & {
        $menu-item-height:                                  '24px + (0.4rem + 0.6rem)';

        @include media-breakpoint-up(md) {
          height:                                           calc(#{$menu-item-height}) !important;
          margin-top:                                       calc(0px - (#{$menu-item-height})) !important;
          display:                                          block !important;
          padding-left:                                     $sidebar-collapse-size !important;
          position:                                         absolute !important;
          width:                                            $sidebar-collapse-size !important;

          &.sidebar-loader {
            position: relative !important;
            margin: 10px !important;
            height: 0 !important;
            padding: 12px !important;
            width: unset !important;
          }
        }
        &:hover {
          @include media-breakpoint-up(md) {
            z-index:                                        1000 !important;
            position:                                       absolute !important;
            opacity:                                        1 !important;
            font-size:                                      0.8rem !important;
            visibility:                                     visible !important;
            vertical-align:                                 middle !important;
            overflow:                                       visible !important;
            width:                                          auto !important;
            padding-left:                                   $sidebar-collapse-size !important;
            padding-top:                                    0px !important;
            height:                                         auto !important;
          }
        }
      }
      @at-root .app-sidebar-open & {
        @include media-breakpoint-between(sm, md) {
          display:                                          initial !important;
          height:                                           auto !important;
          width:                                            100% !important;
          position:                                         relative !important;
          margin-top:                                       0px !important;
          padding-left:                                     0px !important;
        }
      }

      @at-root .app-sidebar-toggle.app-sidebar-open & {
        @include media-breakpoint-between(sm, md) {
          display:                                          initial !important;
          position:                                         relative !important;
          height:                                           auto !important;
          width:                                            auto !important;
          padding-left:                                     33px !important;
          margin-top:                                       0px !important;
        }
      }

      @include media-breakpoint-between(sm, md) {
        display:                                            none;
      }
    }

    @include media-breakpoint-down(md) {
      overflow:                                             hidden !important;
    }
  }

  .toggler {
    @include media-breakpoint-down(md) {
      display:                                              block !important;
      position:                                             fixed !important;
      top:                                                  0px !important;
      right:                                                0px !important;
      background:                                           rgb(255, 255, 255) !important;;
      bottom:                                               0px !important;
      width:                                                30% !important;
      z-index:                                              10000 !important;
      text-align:                                           right !important;
      vertical-align:                                       top !important;
    }
    svg {
      @include media-breakpoint-down(md) {
        vertical-align:                                     top !important;
        position:                                           fixed !important;
        top:                                                8px !important;
        right:                                              10px !important;
      }
    }
  }

  .sidebar-collapsed {
    .menu {
      > div {
        @include media-breakpoint-down(md) {
          display:                                          none !important;
        }
      }
    }
  }
}

.app-sidebar-open {
  @include media-breakpoint-down(sm) {
    position:                                               fixed !important;
    width:                                                  100% !important;
    height:                                                 100% !important;
    left:                                                   0px !important;
    top:                                                    0px !important;
    overflow:                                               hidden !important;
    .sidebar {
      overflow:                                             scroll !important;
    }
  }
}

