$sidebar-width: 200px !default;

.slab-app-sidebar-large-menu-container {
  @include position(fixed, $top: $slab-app-header-height);

  background-color: $background-secondary;
  width: $sidebar-width;
  height: calc(100% - #{$slab-app-header-height});

  .slab-app-sidebar-tabs-container {
    margin-top: 45px;
    padding-left: 5px;
    width: 100% !important;
    background-color: $background-secondary;

    .slab-app-sidebar-tab {
      min-height: 50px;
      width: 95%;
      display: block;
      background-color: white;
      margin-bottom: 2px;
      float: right;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-right: 1px solid $background-secondary;
      border-top: 1px solid $background-secondary;
      border-bottom: 1px solid $background-secondary;
      cursor: pointer;

      .slab-app-sidebar-tab-decoration {
        width: 15px;
        min-height: 50px;
        display: inline-block;
        background-color: $table-gray;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }

      span {
        @include user-selection(none);

        position: absolute;
        margin-left: 15px;
        margin-top: 15px;
        color: black;
      }

      &.selected, &:hover {
        border-right: 1px solid white;
        border-top: 1px solid $primary;
        border-bottom: 1px solid $primary;

        .slab-app-sidebar-tab-decoration {
          background-color: $primary;
        }

        span {
          color: $primary;
        }

        .slab-app-sidebar-submenu {
          margin-top: 55px;
          height: 100%;
          .slab-app-sidebar-tab-decoration {
            background-color: $table-gray !important;
          }
          span {
            font-size: 15px;
            color: black !important;
          }
          li {
            height: 52px;
          }
        }
      }
      .slab-app-sidebar-submenu {
        margin-left: 2%;
        padding-left: 0;
        overflow: hidden;
        height: 0;
        li {
          height: 0px;
          width: 95%;
          display: block;
          margin-bottom: 2px;
          float: right;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          border-right: 1px solid $background-secondary;
          border-top: 1px solid $background-secondary;
          border-bottom: 1px solid $background-secondary;
          cursor: pointer;
          -webkit-transition: all 0.3s ease-out;
          span {
            font-size: 0px;
          }
          &.selected,&:hover {
            border-right: 1px solid white;
            border-top: 1px solid $primary;
            border-bottom: 1px solid $primary;

            .slab-app-sidebar-tab-decoration {
              background-color: $primary !important;
            }

            span {
              color: $primary !important;
            }
          }
        }
      }
    }
  }

  .slab-app-sidebar-actions-container {
    bottom: 0px;
    position: absolute;
    width: 94%;
    padding: 0;
    margin-left: 3%;

    button {
      width: 100%;
      display: block;

      &:not(:last-child) {
        margin-bottom: 5px;
      }
    }
  }
}