@rule-height: 40px;
.play-ruler {
  width: 100%;
  height: @rule-height - 1;
  position: absolute;
  top: 1px;
  z-index: 2;
  user-select: none;
  width: calc(100% - 200px);

  .scrollbar {
    .scrollbar-thumb {
      cursor: grab;
      height: 10px;
      border-radius: 10px;
      background: var(--scrollbar-color);

      &:active {
        cursor: grabbing;
      }
    }
  }

  .bar-numbers {
    width: 100%;
    position: absolute;
    white-space: nowrap;
    height: 1.3rem;
    bottom: 0;
    font-size: 12px;
    font-weight: lighter;
    overflow: hidden;

    & > span {
      display: inline-block;

      &:nth-child(4n + 1) {
        font-size: 1rem;
        font-weight: bold;
      }
    }
  }

  .play-head {
    position: relative;
    top: 11px;
    margin-left: -11px;
    width: 24px;

    &::before {
      position: absolute;
      background-color: currentColor;
      box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%), 0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
      content: '';
      height: 100vh;
      margin-left: 11.4px;
      margin-top: 18px;
      width: 1px;
      pointer-events: none;
    }
    svg {
      transform: rotate(90deg);
    }
  }
}
