@import '../../style/mixin';

.Yep-indexed-list {
  &-section-body.Yep-list-body,
  &-section-body.Yep-list-body .Yep-list-item:last-child .Yep-list-line {
    //.hairline-remove('bottom');
  }

  &-section-header {
    &.Yep-list-body,
    &.Yep-list-body .Yep-list-item .Yep-list-line {
      //.hairline-remove('bottom');
    }

    .Yep-list-item {
      height: $list-title-height;
      min-height: $list-title-height;
      background-color: $fill-base;

      .Yep-list-line {
        height: $list-title-height;
        min-height: $list-title-height;
      }

      .Yep-list-content {
        font-size: 28px !important;
        color: $color-text-caption !important;
      }
    }
  }

  &-indexed-bar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    color: #000;
    font-size: 32px;
    list-style: none;
    padding: 0;

    li {
      color: #121212;
      font-size: 22px;
      margin-top: 10px;
      padding-top: 4px;
      margin-right: 10px;
      width: 34px;
      height: 34px;
    }
    &-over {
      background-color: $fill-mask;
    }
    &-active {
      background: #987f4e;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #fff;
    }
  }

  &-indicator {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 60px;
    margin: -30px auto auto -60px;
    background: transparent;
    opacity: 0.7;
    color: $brand-primary;
    font-size: 40px;
    border-radius: 60px;
    z-index: $indexedIndicatorZIndex;
    text-align: center;
    line-height: 60px;
    &-hide {
      display: none;
    }
  }
}