.scroll-ranking-board {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;

  &-first {
    overflow: hidden;
  }

  &-scroll {
    flex: 1;
    overflow: hidden;
  }

  .seamless-warp {

  }

  &-list {

  }

  .scroll-ranking-board-item {
    overflow: hidden;
    transition: all $transition-time;
  }

  .scroll-ranking-board-item-info {
    display: flex;
    align-items: center;
    width: 100%;
    padding: $text-padding 0;
    font-size: $font-size;

    .scroll-ranking-board-item-rank {
      width: $component-size-large;
      margin-right: $text-span;
      color: #fff;
    }

    .scroll-ranking-board-item-name {
      flex: 1;
      font-size: $font-size;
      color: $dv-dark-primary-text-color;

      @include text-ellipsis;
    }

    scroll-ranking-board-item-value {
      font-weight: bold;
      color: $dv-dark-sub-color;
    }
  }

  .ranking-column {
    background: $dv-dark-highlight-background;

    .inside-column {
      position: relative;
      height: $text-span;
      margin-bottom: 2px;
      overflow: hidden;
      background: linear-gradient(-90deg, $dv-dark-primary-color1, $dv-dark-primary-color);
      border-radius: 1px;
      transition: $transition-time;
    }
  }
}