@use "../../libs/css/mixin" as *;
@use "../../libs/css/theme" as *;

@include b(index-bar) {
  position: fixed;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  @include m(left) {
    left: 0;
  }

  @include m(right) {
    right: 0;
  }

  @include e(index) {
    @include m(list) {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: $hy-border-margin-padding-base;

      @include e(item) {
        display: flex;
        align-items: center;
        justify-content: center;
        color: $hy-text-color--3;
        margin: 2rpx 0;
        border-radius: $hy-radius-sm;

        @include is(active) {
          position: relative;
          color: $hy-primary;
          background: $hy-background--hover;
        }
      }
    }
  }

  @include e(toast) {
    width: 50px;
    height: 50px;
    border-radius: 100px 100px 0 100px;
    text-align: center;
    color: #ffffff;
    background-color: $hy-background--empty;
    transform: rotate(-45deg);
    display: flex;
    justify-content: center;
    align-items: center;

    @include m(text) {
      transform: rotate(45deg);
      font-size: $hy-font-size-lg;
    }
  }
}