#mainSidebarWrapper {
  background: $color-outer-space;
  height: 100vh;
  float: left;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 21;

  #mainSidebar {
    width: rem-calc(60);
    float: left;
    overflow: hidden;
    .main-sidebar-logo {
      padding: rem-calc(15) rem-calc(21) rem-calc(15) rem-calc(16);
    }
    .main-sidebar-menu-wrapper {
      height: calc(100vh - 125px);
      overflow-y: auto;
      overflow-x: hidden;
      // width: 80px;
      width: 256px;
    }
    ul.main-sidebar-menu {
      padding-top: 6px;
      @extend .clear-list;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      width: 60px;
      height: calc(100vh - 125px);
      > li {
        margin-bottom: rem-calc(20);
        display: block;
        position: relative;
        .loader-2 {
          position: absolute;
          top: -7px;
          left: -7px;
          z-index: -1;
        }
        &.active,
        &.main-sidebar-products.active {
          a {
            opacity: 1;
            padding: 0;
            &:before {
              background: $color-cerulean;
              display: block;
            }
          }
        }

        &.main-sidebar-products {
          a {
            width: 34px;
            height: 34px;
            color: $color-white;
            opacity: 0.4;
            i {
              font-size: rem-calc(22);
              [class*='path'] {
                &:before {
                  color: $color-white;
                }
              }
            }
          }
        }

        &.main-sidebar-app {
          &.active {
            a {
              opacity: 1;
            }
          }
          a {
            width: 34px;
            height: 34px;
            color: $color-white;
            opacity: 0.4;
            i {
              color: #fff;
              font-size: rem-calc(20);
            }
          }
        }

        &.main-sidebar-shoplo-app {
          &.active {
            a {
              opacity: 1;
            }
          }
          a {
            opacity: 0.4;
          }
        }

        &.main-sidebar-chat-app {
          a {
            background-color: $color-frost;
          }
        }

        &.main-sidebar-multi-app {
          a {
            background-color: $color-cornflower;
          }
        }

        &.main-sidebar-separator {
          border-radius: 10px;
          width: 5px;
          height: 5px;
          content: '';
          background: $color-bright-gray;
          display: inline-block;
        }

        &.main-sidebar-channel {
          a {
            opacity: 0.4;
            width: 30px;
            height: 30px;
            background-size: 30px 30px;
            display: block;
            background-repeat: no-repeat;
          }
          &.active {
            > a {
              opacity: 1;
            }
          }
          .main-sidebar-counter {
            width: 12px;
            top: -2px;
            height: 12px;
            right: -2px;
          }
        }

        &.main-sidebar-notifications {
          margin-top: auto;
          a {
            color: $color-pale-sky;

            .main-sidebar-counter {
              width: 12px;
              top: -4px;
              height: 12px;
              right: -3px;
            }

            i {
              font-size: 20px;
            }
          }
        }

        &.main-sidebar-add-channel {
          &.active,
          &:hover {
            a {
              background: $color-white;
              border-color: $color-white;
              color: $color-cerulean;
            }
          }
          a {
            border-radius: rem-calc(31);
            width: rem-calc(31);
            height: rem-calc(31);
            line-height: rem-calc(28);
            border: 1px dotted $color-mako;
            color: #fff;
            opacity: 1;
            font-size: rem-calc(14);
            transition: 0.3s all;
          }
        }

        > a {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          // opacity: 0.3;
          transition: 0.3s opacity;

          &:hover {
            opacity: 1;
          }

          > img {
            max-width: 30px;
            max-height: 30px;
          }

          .main-sidebar-counter {
            width: rem-calc(18);
            height: rem-calc(18);
            border-radius: 20px;
            background: $color-mandy;
            border: 2px solid $color-outer-space;
            text-align: center;
            color: $color-white;
            position: absolute;
            top: -9px;
            right: -9px;
            font-size: rem-calc(11);
            line-height: rem-calc(15);
            font-weight: 600;
          }

          &:before {
            border-radius: 10px;
            width: 4px;
            height: 4px;
            content: '';
            position: absolute;
            left: -10px;
            display: none;
            top: 50%;
            @include transform(translateY(-50%));
          }
        }
      }
    }

    .main-sidebar-user {
      margin-bottom: 0;
      padding-bottom: rem-calc(20);
      padding-top: rem-calc(10);
      position: relative;

      > button {
        margin: auto;
        background: $color-pale-sky;
        color: $color-bright-gray;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        overflow: hidden;
        border: transparent;
        > i {
          font-size: 25px;
          vertical-align: bottom;
          align-self: flex-end;
          line-height: 23px;
          margin-top: 7px;
        }
      }

      .main-sidebar-status {
        width: rem-calc(12);
        height: rem-calc(12);
        border-radius: 20px;
        background: $color-gray-chateau;
        border: 2px solid $color-outer-space;
        text-align: center;
        color: $color-white;
        position: absolute;
        bottom: 20px;
        right: rem-calc(15);
        font-size: rem-calc(11);
        line-height: rem-calc(15);
        font-weight: 600;
        z-index: 9;

        &.active {
          background-color: $color-frost;
        }
      }

      .dropdown-menu {
        left: 45px;
        bottom: -10px;
      }
    }
  }
}