systelab-app-sidebar-large {
  $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 var(--primary);
          border-bottom: 1px solid var(--primary);

          .slab-app-sidebar-tab-decoration {
            background-color: var(--primary);
          }

          span {
            color: var(--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 var(--primary);
              border-bottom: 1px solid var(--primary);

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

              span {
                color: var(--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;
        }
      }
    }
  }
}