@cls: zyouh-list;

.@{cls} {
  &__body {
    position: relative;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    &-transition {
      transition: transform 0.3s;
    }
  }

  &__scroller-view {
    position: relative;
  }

  &__indicator {
    &-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      will-change: transform, margin-top;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      backface-visibility: hidden;
      transform: translate3d(0, 0, 0);
      &--row {
        flex-direction: row;
      }

      &.flashing {
        .@{cls}__indicator-dot {
          animation: dot-flashing-1 1s step-end infinite both;

          &:nth-child(2) {
            animation-name: dot-flashing-2;
          }
          &:nth-child(3) {
            animation-name: dot-flashing-3;
          }
        }
      }
    }
    &-text {
      margin-left: 1em;
      font-size: 24px;
      color: #999;
    }

    &--dot {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    &-dot {
      display: inline-flex;
      border-radius: 50%;
      // prettier-ignore
      width: 6PX;
      // prettier-ignore
      height: 6PX;
      background-color: currentColor;
      color: #ddd;
      animation: none;
      will-change: animation;
      & + .@{cls}__indicator-dot {
        margin-left: 20px;
      }
    }
  }
}

@keyframes dot-flashing-1 {
  0% {
    color: #aaa;
  }
  33.33% {
    color: #ddd;
  }
  66.66% {
    color: #ddd;
  }
  100% {
    color: #aaa;
  }
}

@keyframes dot-flashing-2 {
  0% {
    color: #ddd;
  }
  33.33% {
    color: #aaa;
  }
  66.66% {
    color: #ddd;
  }
  100% {
    color: #aaa;
  }
}

@keyframes dot-flashing-3 {
  0% {
    color: #ddd;
  }
  33.33% {
    color: #ddd;
  }
  66.66% {
    color: #aaa;
  }
  100% {
    color: #aaa;
  }
}