.AudioWaveWrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .AudioWave-PercentHideBar {
    background-color: var(--Fill_Background_Light);
    opacity: 0.2;
    position: absolute;
    right: 0;
    height: 100%;
  }

  .AudioWave-MarkToken-Item {
    position: absolute;
    bottom: 3px;
    width: 2px;
    height: 5px;
    transition-duration: 0.3s;
    cursor: pointer;
    border-radius: 3px;

    &:hover {
      height: 11px;
      transition-duration: 0.3s;
    }
  }
  .AudioWave-MarkToken-Tooltip {
    max-width: 290px;
    cursor: default;
    top: -50px !important;
    padding-bottom: 0px;
    border-radius: 8px;
    .arrow {
      position: absolute;
      bottom: -5px;
      left: 50%;
      background-color: var(--Fill_Brand_Inverse);
      width: 14px;
      height: 14px;
      transform: translateX(-50%) rotate(-45deg);
      border-radius: 2px;
    }
    .ant-tooltip-arrow {
      display: none;
    }
    .ant-tooltip-inner {
      border-radius: 5px; // title
      padding: 5px 12px;
      box-shadow: 0 2px 8px 0 rgba(90, 68, 151, 0.1);
      display: flex;
      flex-flow: column;
      div:first-child {
        font-size: 12px;
        opacity: 0.6;
        transform: scale(0.8);
        transform-origin: 0 0;
        height: 16px;
      } // content
      div:last-child {
        font-size: 12px;
        line-height: 20px;
        max-width: 290px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
