.section{
  .measure{
    transition: .5s all;
    position: relative;
    &.dontTransition{
      .after{
        display: none;
      }
    }
    .after{
      .img{
        display: block;
        background-repeat: no-repeat;
        background-position: right;
        background-size: cover;
        height: 100%;
        width: 130PX;
      }
      .font{
        font-size: calc(1rem * 2 * 0.24);
        font-family: 'Roboto', sans-serif;
        // -webkit-text-stroke: 1px #fff;
        font-weight: bold;
        // width: 30PX;
      }
      transform: translateY(-30px) scale(0.75);
      top: 0;
      opacity: 0;
      transition: .5s all;
      content: '';
      position: absolute;
      display: flex;
      align-items: center;
      // max-width: 100%;
      width: 160PX;
      height: 100%;
      left: 0;
      margin-left: -32PX;
    }
  }
  .bad{
    // opacity: 1;
    background-color: rgba(255, 142, 142, .32);
    color: #EE4C6A;
    .after .img{
      // top: -100PX;
      // opacity: 1;
      background-image: url('./icons/bad.png?inline');
      background-position: 20PX;
    }
  }
  .good{
    // opacity: 1;
    background-color: rgba(1, 193, 181, .2);
    color: #FF958B;
    .after .img{
      // top: -100PX;
      // opacity: 1;
      background-image: url('./icons/good.png?inline');
      background-position: 5PX;
    }
  }
  .great{
    // opacity: 1;
    background-color: rgba(255, 178, 82, .37);
    color: #FF8E5A;
    .after .img{
      // top: -100PX;
      // opacity: 1;
      background-image: url('./icons/great.png?inline');
    }
  }
  .perfect{
    // opacity: 1;
    background-color: rgba(255, 220, 64, .4);
    color: #516AFF;
    .after .img{
      // top: -100PX;
      // opacity: 1;
      background-image: url('./icons/perfect.png?inline');
    }
  }
  :global{
    // .list-item {
    //   opacity: 0;
    //   .after{
    //     opacity: 1;
    //     transform: scale(0.5);
    //   }
    // }
    .list-enter-active{
      opacity: 1;
      :local{
        .after{
          opacity: 1;
        }
      }
    }
    .list-enter-from{
      opacity: 0;
      :local{
        .after{
          left: 50%;
          opacity: 1;
          transform: translateY(0) scale(1);
          margin-left: -65PX;
        }
      }
      // transform: translateY(-30px);
    }
    // .list-leave-to{
    //   .after{
    //     transform: translateY(0);
    //   }
    // }
  }
}
.noteWrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.noteBase{
  display: none;
}
:global(.follow-success) > .noteRight{
  display: block;
}
:global(.follow-error) > .noteError{
  display: block;
}
:global{
  .dotWrap{
    position: absolute;
    display: flex;
    justify-content: flex-end;
    transform: translateY(-10%);
    .dot{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20PX;
      height: 20PX;
      border-radius: 50%;
      background-color: rgb(255, 145, 0);
      color: #fff;
      font-weight: bold;
      font-size: 14Px;
    }
  }
  .lineHide {
    display: none !important;
  }
}
.lineHide {
  display: none !important;
}

.lineTEST {
	position: absolute;
	min-height: 80 * .7PX;
	margin-top: -20 * .7PX;
  background-color: var(--cursor-background-color);
  // width: calc(10PX * var(--osdm-zoom));
  width: 2PX !important;
  border-radius: calc(4PX * var(--osdm-zoom));
  transform: translateX(3PX);
}

@keyframes flash {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
.flash{
  animation: flash 1.2s infinite ease-in-out;
}

.restFlag{
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  
  div{
    width: 10PX;
    height: 10PX;
    border-radius: 50%;
    background-color: rgb(255, 145, 0);
    margin: 0 1PX;
  }
}
.restFlagActive{
  animation: flicker 1s ease infinite;
  div{
    background-color: #2dc7aa;
  }
}
@keyframes flicker {
  0%{
    opacity: 1;
  }
  50%{
    opacity: .2;
  }
  100%{
    opacity: 1;
  }
}
