@import './../common/abstracts/_mixin.scss';
@import './../common/abstracts/variable.scss';

.wui-theme-dark {
  @include b(index-bar) {
    @include e(index) {
      color: $-color-white;
    }
    @include e(tips-value) {
      color: $-color-white;
      background-color: $-dark-background5;
    }
    @include e(auxiliary-element) {
      border-color: transparent transparent transparent $-dark-background5;
    }
  }
}

@include b(index-bar) {
  position: relative;
  width: 100%;
  height: 100%;

  @include e(content) {
    width: 100%;
    height: 100%;
  }

  @include e(sidebar) {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
  }

  @include e(index) {
    font-size: 12px;
    font-weight: $-fw-medium;
    color: $-color-title;
    padding: 4px 6px;

    @include when(active) {
      color: $-color-theme;
    }
  }
  @include e(tips-value) {
    position: absolute;
    top: 0;
    left: -80rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: $-color-gray-3;
    color: $-color-gray-7;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    font-size: $-fs-big;
    font-weight: $-fw-medium;
    line-height: 1;
  }
  @include e(auxiliary-element) {
    position: absolute;
    height: 0;
    width: 0;
    right: 0;
    top: 50%;
    border-color: transparent transparent transparent $-color-gray-3;
    border-width: 30rpx;
    border-style: solid;
    transform: translate(47rpx, -50%);
  }
}