$sidebar-small-width: 60px !default;
$sidebar-small-margin-top: 35px !default;

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

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

  ul {
    list-style-type: none;
  }


  .slab-app-sidebar-button-container {
    margin-top: $sidebar-small-margin-top;
    margin-bottom: 0px !important;
    padding-left: 0px;
    width: 100% !important;
    text-align: center;
    background-color: $background-secondary;
    @include user-selection(none);
    color: #c9c9c9;

    &.slab-bottom {
      margin-top: 0;
    }

    .slab-app-sidebar-button {
      position: relative;
      width: 100%;


      font-size: 26px;
      cursor: pointer;

      i {
        margin-top: 15px;
        margin-bottom: 15px;
      }

      &.selected, &:hover {
        color: $primary;
      }

      &:hover {
        background-color: #dedede;
      }

      .arrow-left {
        position: absolute;
        top: 18px;
        right: -1px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid white;
      }
    }
  }
}