@import '../../base.less';

@import './_var.less';

.@{prefix}-side-bar {
  display: flex;
  flex-direction: column;
  width: @side-bar-width;
  height: @side-bar-height;
  overflow-y: auto;
  background-color: @side-bar-bg-color;

  &-item {
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    padding: @side-bar-item-padding;
    font: @side-bar-font;
    color: @side-bar-color;
    background: @side-bar-bg-color;
    min-height: @side-bar-item-height;
    box-sizing: border-box;
    white-space: wrap;

    &--active {
      font-weight: 600;
      background: @bg-color-container;
      color: @side-bar-active-color;
    }

    &__icon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: @side-bar-icon-size;
      margin-right: 2px;
    }

    &__prefix,
    &__suffix {
      z-index: 1;
      position: absolute;
      right: 0;
      width: calc(@side-bar-border-radius * 2);
      height: calc(@side-bar-border-radius * 2);
      background: @side-bar-prefix-bg-color;

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: @side-bar-bg-color;
      }
    }

    &__prefix {
      top: calc(@side-bar-border-radius * -2);

      &::after {
        border-bottom-right-radius: @side-bar-border-radius;
      }
    }

    &__suffix {
      bottom: calc(@side-bar-border-radius * -2);

      &::after {
        border-top-right-radius: @side-bar-border-radius;
      }
    }

    &--disabled {
      color: @side-bar-disabled-color;
    }

    &__line {
      width: 3px;
      height: 14px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: @side-bar-active-color;
      border-radius: 4px;
    }
  }

  &__padding {
    flex: 1;
    background-color: @side-bar-bg-color;
  }
}