// @import 'src/pages/base-pro/mixin.scss';
@import 'press-ui/common/style/smoba/mixin.scss';

.press-index-side {
  display: flex;
  flex-direction: column;
  align-items: center;

  &__sidebar {
    position: relative;
    width: 2.2rem;
    flex: 1;
    flex-shrink: 0;
    padding-left: .9rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/sidebar-line.png) no-repeat .46rem top;
    background-size: .02rem 100%;
    background-position: .68rem;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  &__sidebar--active {
    position: absolute;
    top: .36rem;
    left: .22rem;
    width: 2.23rem;
    height: 1.48rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/sidebar-on.png) no-repeat right center;
    background-size: contain;
    transition-duration: .3s;
  }

  &__sidebar__item {
    position: relative;
    font-family: 'GAMEFONT';
    color: #77a7df;
    font-size: $font-xs;
    padding: .28rem 0;
    z-index: 2;

    &:first-child {
      margin-top: .6rem;
    }

    &.sidebar-on {
      color: $color-white;
      text-shadow: 0 0 .16rem rgba(95, 147, 234, .69);
    }
  }

  &__circle {
    position: absolute;
    left: .44rem;
    top: 1.01rem;
  }

  &__circle-item {
    width: .06rem;
    height: .06rem;
    background-color: #335085;
    border-radius: 50%;
    margin-bottom: .82rem;
  }

  &__tips {
    height: .66rem;
    width: 2.16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .04rem;
    background: #092448;
    font-size: .24rem;
    color: #77a7df;
    margin-bottom: .16rem;
  }

  &__btn {
    width: .8rem;
    height: .72rem;
    margin-bottom: .6rem;

    img {
      width: 100%;
      height: 100%;
    }

    &.red-dot {
      position: relative;

      &:after {
        position: absolute;
        right: .1rem;
        top: .1rem;
        content: '';
        width: .2rem;
        height: .2rem;
        background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/red-dot.png) no-repeat center center;
        background-size: contain;
      }
    }
  }
}