@import '../../styles/index.less';

@keyframes scaleDr {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}

.ac-points {

  &__title{
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: @label-color;
  }

  &__image {
    width: @width;
    height: @height;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    > img {
      width: 100%;
    }
  }

  &__bar {
    display: flex;
    align-content: center;
    justify-content: center;
    width: @width;
    height: @control-size;
    margin-top: 10px;
    margin-bottom: 10px;
    color: @track-label;
    font-size: 14px;
    line-height: @control-size;
    text-align: center;
    background: #f7f9fa;
    border: 1px solid #e4e7eb;
    > div {
      margin-left: 4px;
    }
    &--success {
      color: #fff;
      background: @color-success;
    }

    &--failure {
      color: #fff;
      background: @color-failure;
    }
    &--active{
      background: @track-active;
      color: #fff;
    }
  }

  &__point {
    position: absolute;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    background-color: @brand-color;
    border: 3px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation-name: scaleDr;
    animation-duration: 4s; /*动画所花费的时间*/
    animation-timing-function: ease-in-out; /*动画的速度曲线*/
    animation-iteration-count: infinite; /*动画播放的次数*/

    > div {
      width: 14px;
      height: 14px;
      line-height: 14px;
    }
  }
}