:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, D10-30;
}

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

.playPauseButton {
  margin-right: 18px;
  flex-shrink: 0;
}

.slider {
  user-select: none;
  width: 100%;
  position: relative;
  cursor: pointer;
  padding: 10px 0;
  margin-right: 12px;
}

.track {
  height: 3px;
  background: linear-gradient(
    to right,
    value(B10) 0%,
    value(B10) var(--audio-player-position),
    value(D10-30) var(--audio-player-position),
    value(D10-30) 100%
  );
}

.handle {
  -st-states: grow;

  position: absolute;
  pointer-events: none;
  background: value(B10);
  border-radius: 100%;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 12px;
  height: 12px;
}

.tooltip:hover + .handle:grow {
  width: 18px;
  height: 18px;
}

.tooltip {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
}

.tooltipTarget {
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.timer {
  flex-shrink: 0;
}