/* ==========================================================================
	Audio Player
============================================================================= */
.audio-player {
  color: #0e4168;
  background-color: #fff;
  container-name: --player;
  container-type: inline-size;
  padding-block: 10px;
  padding-block: 0.625rem;
  padding-inline: clamp(10px, 4.6808510638px + 1.0638297872vw, 20px);
  padding-inline: clamp(0.625rem, 0.29255rem + 1.0638297872vw, 1.25rem);
}

.audio-player__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  gap: 0.625rem;
}

.audio-player__button {
  display: block;
}

.audio-player__button--playback {
  --icon-wrapper-color: #e8b720;
  --icon-color: #001835;
  --icon-wrapper-scale: 1.1;
  --icon-border-color: #f6d559;
  inline-size: clamp(50px, 38.3636363636px + 3.6363636364vw, 74px);
  inline-size: clamp(3.125rem, 2.39773rem + 3.6363636364vw, 4.625rem);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  color: var(--icon-color);
  background-color: var(--icon-wrapper-color);
  border-radius: 50%;
  margin: 8px;
  margin: 0.5rem;
}
.audio-player__button--playback:focus-visible {
  --icon-wrapper-color: #9dcee6;
  --icon-wrapper-scale: 1;
  --icon-border-color: #9dcee6;
}
@media (hover: hover) {
  .audio-player__button--playback:hover {
    --icon-wrapper-color: #9dcee6;
    --icon-wrapper-scale: 1;
    --icon-border-color: #9dcee6;
  }
}
.audio-player__button--playback::before {
  position: absolute;
  inset: 0;
  scale: var(--icon-wrapper-scale);
  display: block;
  border: 1px solid var(--icon-border-color);
  border: 0.0625rem solid var(--icon-border-color);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transition: border 0.25s, scale 0.25s;
}

.audio-player__button--volume {
  color: currentColor;
  padding-block: 10px;
  padding-block: 0.625rem;
}
.audio-player__button--volume:focus-visible {
  color: #001835;
}
@media (hover: hover) {
  .audio-player__button--volume:hover {
    color: #001835;
  }
}

.audio-player__button-label {
  block-size: 1px;
  block-size: 0.0625rem;
  inline-size: 1px;
  inline-size: 0.0625rem;
  position: absolute;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  margin: -0.0625rem;
  overflow: hidden;
  padding: 0;
}

.audio-player__progress {
  block-size: 20px;
  block-size: 1.25rem;
  position: relative;
  flex: 1;
  cursor: pointer;
}
.audio-player__progress::before {
  block-size: 8px;
  block-size: 0.5rem;
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -50%;
  display: block;
  background-color: #e4f1f7;
  border-radius: 100vmax;
  content: "";
  pointer-events: none;
}

.audio-player__progress-bar-wrapper {
  block-size: 8px;
  block-size: 0.5rem;
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -50%;
  border-radius: 100vmax;
  overflow: hidden;
  pointer-events: none;
}

.audio-player__progress-bar {
  block-size: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #0e4168;
  transition: transform 0.1s linear;
}

.audio-player__time {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.625;
  min-inline-size: 95px;
  min-inline-size: 5.9375rem;
}
@container (min-width: 500px) {
  .audio-player__time {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.7777777778;
  }
}
/*# sourceMappingURL=audio-player.css.map */