@import '../common/abstracts/variable';
@import '../common/abstracts/mixin';

.wot-theme-dark {
  @include b(sidebar-item) {
    color: $-dark-color;
    background: $-dark-background2;

    &:active {
      background-color: $-dark-background4;
    }

    @include m(active) {
      color: $-sidebar-active-color;
      background: $-dark-background;
    }

    @include m(disabled) {
      color: $-dark-color-gray;

      &:active {
        background-color: $-dark-background2;
      }
    }
  }
}

@include b(sidebar-item) {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: $-sidebar-item-height;
  padding: 32rpx;
  font-size: $-sidebar-font-size;
  line-height: $-sidebar-item-line-height;
  color: $-sidebar-color;
  white-space: wrap;
  background: $-sidebar-bg;

  &:active {
    background-color: $-sidebar-hover-bg;
  }

  @include m(active) {
    font-weight: 600;
    color: $-sidebar-active-color;
    background: $-sidebar-active-bg;

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: $-sidebar-active-border-width;
      height: $-sidebar-active-border-height;
      content: '';
      background: $-sidebar-active-color;
      border-radius: $-sidebar-active-border-width;
      transform: translateY(-50%);
    }

    &:active {
      background-color: transparent;
    }
  }

  @include m(prefix) {
    border-bottom-right-radius: $-sidebar-border-radius;
  }

  @include m(suffix) {
    border-top-right-radius: $-sidebar-border-radius;
  }

  @include m(disabled) {
    color: $-sidebar-disabled-color;
    cursor: not-allowed;

    &:active {
      background-color: $-sidebar-bg;
    }
  }

  @include edeep(badge) {
    z-index: 2;
  }

  @include edeep(icon) {
    margin-right: 2px;
    font-size: $-sidebar-icon-size;
  }
}