.audio-player {
  background-color: #f7fbff;
  border: 2px solid var(--primary-color);
  padding: 10px;
  margin-top: 10px;
}

.audio-player__controls {
  display: grid;
  gap: 12px;
  text-align: left;
  grid-template-columns: auto auto minmax(140px, 1fr);
  grid-template-areas:
    'progress progress progress'
    'button time volume';
  align-items: center;
}

html.no-js .audio-player__controls {
  display: none;
}

html.js audio[data-enhanced='true'] {
  display: none;
}

.audio-player__button {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: var(--background-color);
  cursor: pointer;
  font-family: var(--font-family);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-transform: lowercase;
  grid-area: button;
  justify-self: start;
}

.audio-player__button:focus-visible,
.audio-player__seek:focus-visible,
.audio-player__volume-slider:focus-visible {
  outline: 3px solid #ff7b00;
  outline-offset: 2px;
}

.audio-player__progress {
  width: 100%;
  grid-area: progress;
}

.audio-player__time {
  display: flex;
  gap: 4px;
  font-size: 0.9rem;
  grid-area: time;
  align-items: center;
  justify-self: start;
}

.audio-player__seek,
.audio-player__volume-slider {
  appearance: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
}

.audio-player__button-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: none;
}

.audio-player__button[data-state='play'] .audio-player__icon--play {
  display: block;
}

.audio-player__button[data-state='pause'] .audio-player__icon--pause {
  display: block;
}

.audio-player__volume {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  grid-area: volume;
  justify-content: flex-end;
  justify-self: end;
  width: 100%;
  max-width: 200px;
}

.audio-player__volume-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}

.audio-player__volume-icon svg {
  width: 100%;
  height: 100%;
  transform: scale(1.4);
  transform-origin: center;
  fill: var(--primary-color);
}

.audio-player__volume-slider {
  max-width: none;
  width: 100%;
}

.audio-player__seek::-webkit-slider-runnable-track,
.audio-player__volume-slider::-webkit-slider-runnable-track {
  background: #d0dbff;
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  height: 8px;
}

.audio-player__seek::-moz-range-track,
.audio-player__volume-slider::-moz-range-track {
  background: #d0dbff;
  border: 1px solid var(--primary-color);
  border-radius: 999px;
  height: 8px;
}

.audio-player__seek::-webkit-slider-thumb,
.audio-player__volume-slider::-webkit-slider-thumb {
  appearance: none;
  background: var(--primary-color);
  border-radius: 50%;
  height: 16px;
  width: 16px;
  margin-top: -4px;
}

.audio-player__seek::-moz-range-thumb,
.audio-player__volume-slider::-moz-range-thumb {
  background: var(--primary-color);
  border: none;
  border-radius: 50%;
  height: 16px;
  width: 16px;
}

.audio-player__seek:active::-webkit-slider-thumb,
.audio-player__volume-slider:active::-webkit-slider-thumb,
.audio-player__seek:active::-moz-range-thumb,
.audio-player__volume-slider:active::-moz-range-thumb {
  background: #ff7b00;
}

.audio-player__seek::-ms-track,
.audio-player__volume-slider::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
}

@media screen and (max-width: 600px) {
  .audio-player__controls {
    grid-template-columns: minmax(0, 0.75fr) minmax(140px, 1fr);
    grid-template-areas:
      'progress progress'
      'time volume'
      'button button';
  }

  .audio-player__button {
    width: 100%;
    border-radius: 6px;
    justify-self: stretch;
  }

  .audio-player__volume {
    width: 100%;
    min-width: 0;
  }
}