.#{$prefix}-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: $--sidebar-width;
  color: $--sidebar-color;
  // overflow-y: auto;
  // overflow-x: hidden;
  background-color: $--sidebar-bg;
  z-index: $--sidebar-zindex;
  @include transition();
  &__header {
    padding: $--sidebar-header-padding;
    background-color: $--sidebar-header-bg;
  }
  &__logo {
    width: $--sidebar-logo-width;
    display: inline-block;
    color: #fff;
    @include text-overflow;
    @include transition();
  }
}

.#{$prefix}-sidebar.#{$prefix}-sidebar--collapse {
  width: $--sidebar-collapse-width;
  @include transition();
  .#{$prefix}-sidebar__header {
    padding: $--sidebar-collapse-header-padding;
  }
  .#{$prefix}-sidebar__logo {
    width: $--sidebar-collapse-logo-width;
    @include transition();
  }
}