@import "flive-vars";
.only-collapsible, .item-only-collapsible, .submenu-only-collapsible {
  display: none;
}
.base {
  overflow: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  border-right: 1px solid $nav-border-color;
  padding: $content-padding-desktop 0;

  &.sm {
    width: $sidemenu-width-sm;
  }
  &.md {
    width: $sidemenu-width-md;
  }
  &.lg {
    width: $sidemenu-width-lg;
  }

  &.with-header {
    margin-top: $header-height-desktop;
  }

  .list {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
  }
}
/** variants */
.light{
  .base {
    color: $black-grey;
    background: $white;
  }
}
.dark {
  .base {
    background: $black-grey;
    border-right: none;
  }
  .base, a {
    color: $white;
  }
}

/** collapse */
@mixin collapsible-behavior() {
  &.only-collapsible {
    display: block;
  }

  .base, .overlay {
    transition: .2s;
  }

  .item-only-collapsible, .submenu-only-collapsible{
    display:flex
  }

  &.left .base {
    left: 0;

    &.sm {
      margin-left: -$sidemenu-width-sm;
    }
    &.md {
      margin-left: -$sidemenu-width-md;
    }
    &.lg {
      margin-left: -$sidemenu-width-lg;
    }
  }
  &.right .base {
    right: 0;

    &.sm {
      margin-right: -$sidemenu-width-sm;
    }
    &.md {
      margin-right: -$sidemenu-width-md;
    }
    &.lg {
      margin-right: -$sidemenu-width-lg;
    }
  }

  &.state-open {
    .overlay {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: $black-grey;
      opacity: 0.5;
      z-index: 99;
    }
  }
  &.left.state-open {
    .base {
      margin-left: 0;
    }
  }
  &.right.state-open {
    .base {
      margin-right: 0;
    }
  }
}

.collapsible-xs {
  @media (max-width: $screen-xs-max) {
    @include collapsible-behavior();
  }
}

.collapsible-sm {
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @include collapsible-behavior();
  }
}

.collapsible-md {
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @include collapsible-behavior();
  }
}

.collapsible-lg {
  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    @include collapsible-behavior();
  }
}

.collapsible-xl {
  @media (min-width: $screen-xl-min) {
    @include collapsible-behavior();
  }
}