:root {
  /* Customize everything here */
  --circle-size: 5rem;       /* overall button size */
  --circle-radius: 45;        /* SVG <circle> r value */
  --ring-color: var(--color-wrapper01);      /* active progress ring */
  --ring-bg: var(-color-background01);            /* background ring */
  --ring-width: 6;            /* stroke thickness */
  --ring-start: -90deg;       /* rotate ring start point */
  --icon-size: 32px;          /* size of play/pause icons */
  --icon-color: var(--color-wrapper01);         /* play/pause color */
  --btn-bg: var(--color-wrapper01);             /* button background */
  --btn-bg-hover: var(--color-box-hover);       /* hover background */
}

.audio-player {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
}

.circle-btn {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--icon-color);
  padding: 0;
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
  box-shadow: 0.1rem 0.1rem 0.25rem #26384787;
}

.circle-btn:hover {
  background: var(--btn-bg-hover);
  transform: scale(1.05);
}

/* SVG fills the button */
.circle-svg {
  width: 100%;
  height: 100%;
}

/* ring background */
.circle-bg {
  fill: none;
  stroke: var(--ring-bg);
  stroke-width: var(--ring-width);
}

/* progress ring */
.circle-progress {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: var(--ring-width);
  stroke-linecap: round;
  stroke-dasharray: 283; /* default for r=45 */
  stroke-dashoffset: 283;
  transform: rotate(var(--ring-start));
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.1s linear;
}

/* icons */
.icon {
  display: none;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: var(--icon-color);
}

.circle-btn.playing .icon-pause {
  display: block;
}
.circle-btn.playing .icon-play {
  display: none;
}
.circle-btn:not(.playing) .icon-play {
  display: block;
}
.circle-btn:not(.playing) .icon-pause {
  display: none;
}