.audio-player {
  width: 100%;
  min-width: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  &__play-pause-button {
    margin-right: 18px;
    flex-shrink: 0;
  }

  &__slider {
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
    width: 100%;
    position: relative;
    cursor: pointer;
    padding: 10px 0;
    margin-right: 12px;
  }

  &__track {
    height: 3px;
    background: linear-gradient(
      to right,
      var(--wds-color-fill-standard-primary, var(--wds-color-blue-100, var(--wsr-color-B10, #116dff))) 0%,
      var(--wds-color-fill-standard-primary, var(--wds-color-blue-100, var(--wsr-color-B10, #116dff)))
        var(--wds-internal-audio-player-position),
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
        var(--wds-internal-audio-player-position),
      var(--wds-color-black-100-transparent-30, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))) 100%
    );
  }

  &__handle {
    position: absolute;
    pointer-events: none;
    background: var(
      --wds-slider-slider-knob-color,
      var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff))
    );
    border: 2px solid
      var(--wds-color-fill-standard-primary, var(--wds-color-blue-100, var(--wsr-color-B10, #116dff)));
    border-radius: 100%;
    transform: translate(-50%, -50%);
    top: 50%;
    width: 8px;
    height: 8px;
  }

  @media (hover: hover) {
    &__tooltip:hover + &__handle--grow {
      width: 18px;
      height: 18px;
    }
  }

  &__tooltip {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
  }

  &__tooltip-target {
    cursor: pointer;
    width: 24px;
    height: 24px;
  }

  &__timer {
    flex-shrink: 0;
  }
}