@use 'mixins/mixins' as *;
@use 'mixins/function' as *;
@use 'mixins/config' as *;
@use 'var/index';

@include b(sidebar) {
  height: 100%;

  &.is-vertical {
    min-height: 400px;

    &:not(.#{$el-namespace + -menu--collapse}) {
      width: var(--plus-sidebar-width);
      flex-shrink: 0;
    }

    &.#{$el-namespace + -menu--collapse} {
      .#{$el-namespace + -menu-item} {
        width: calc(var(--plus-sidebar-min-width) - 2px);
      }
    }

    .#{$el-namespace + -scrollbar__wrap} {
      overflow-x: hidden;
    }

    &.#{$el-namespace + -menu--collapse} {
      .#{$plus-namespace + -sidebar__item-title} {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
      }
      .#{$el-namespace + -sub-menu__icon-arrow} {
        display: none;
      }
    }

    .#{$el-namespace + -scrollbar} {
      height: calc(100% - var(--plus-sidebar-collapse-height));
    }

    .#{$plus-namespace + -sidebar__collapse} {
      width: calc(var(--plus-sidebar-width) - 2px);
      background-color: getCssVar('menu-bg-color');
      height: var(--plus-sidebar-collapse-height);
      box-sizing: border-box;
      position: absolute;
      left: 0;
      bottom: 0;
      align-items: flex-start;

      &.is-collapse {
        width: calc(var(--plus-sidebar-min-width) - 2px);
      }

      &.is-active {
        background-color: getCssVar('menu-bg-color');
      }

      [class*='-icon'] {
        margin-top: 10px;
        font-size: 20px;
        user-select: none;
        cursor: pointer;
      }
    }
  }

  &.is-horizontal {
    width: 100%;

    .#{$el-namespace + -scrollbar} {
      width: 100%;
    }

    .#{$el-namespace + -scrollbar__wrap} {
      width: 100%;
    }

    .#{$el-namespace + -scrollbar__view} {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
    }
  }

  @include e(item-title) {
    user-select: none;
  }
}