@import "flive-vars";

.base {
  display: flex;
  flex-direction: column;
  &.separation-bottom {
    border-bottom: 1px solid $nav-border-color;
  }

  &.separation-top {
    border-top: 1px solid $nav-border-color;
  }

  &.separation-both {
    border-top: 1px solid $nav-border-color;
    border-bottom: 1px solid $nav-border-color;
  }

  &.position-bottom {
    margin-top: auto;
  }

  .list {
    display: flex;
    flex-direction: column;
    padding: 0 0 calc(#{$content-padding-desktop} / 2) 0;
    .item {
      @include sideMenuPadding(1);
    }
    .list {
      .item {
        @include sideMenuPadding(2);
      }
      .list .item {
        @include sideMenuPadding(3);
      }
    }
  }
}