/*
 * Louder 1.0.0 by Audionauts (https://audionauts.co/louder-plugin)
 *
 * Every setting is a custom property. The shortcode/block sets them inline per player;
 * to change the defaults site-wide, add e.g. `.louder { --louder-button-color: #000; }`
 * to Appearance → Customize → Additional CSS.
 */
:where(.louder) {
  --louder-button-size: 60px;
  --louder-button-color: #3b332d;
  /* --louder-button-hover-background: unset, it's a faint tint of the button color. */
  --louder-button-border: 2px;
  --louder-gap: calc(var(--louder-button-size) / 4); /* between button and waveform; scales with the player */
  --louder-icon-size: 38; /* % of the inside of the circle, a plain number (up to 70) */
  --louder-played-color: #3a3633;
  --louder-unplayed-color: #8e8a86;
  --louder-playhead-color: #2b2724;
  --louder-playhead-width: 1px;
  --louder-time-size: 0.8125em; /* follows the surrounding text: 13px next to 16px text */
  --louder-time-color: var(--louder-button-color);
  /* --louder-waveform-height: in px, up to the player height. Unset, it's half the player height. */
}

.louder {
  display: flex;
  align-items: flex-start; /* button lines up with the waveform, the time hangs below */
  gap: var(--louder-gap);
  width: 100%;
  min-height: var(--louder-button-size);
  margin: 1em 0;
  -webkit-user-select: none;
  user-select: none;
}
/* In the block editor the block's wrapper sits around the player. Make it as wide as the player is on the
   page, or a centered flex parent (a Group or Container) shrinks it, and the player with it. */
.wp-block-louder-player {
  width: 100%;
}

/* Scoped twice so theme button styles don't leak in. */
.louder .louder__btn {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--louder-button-size);
  height: var(--louder-button-size);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: var(--louder-button-border) solid var(--louder-button-color);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--louder-button-color);
  cursor: pointer;
  transition: background-color 0.15s;
}
/* Hover: the button fills with the hover background (unset: a faint tint of the button color). Only on
   devices that really hover, so a tapped button on a phone doesn't stay highlighted. */
@media (hover: hover) {
  .louder .louder__btn:hover {
    background: var(--louder-button-hover-background, color-mix(in srgb, var(--louder-button-color) 8%, transparent));
  }
}
/* Focus ring for keyboard users only; many themes outline anything that's clicked. */
.louder .louder__btn:focus:not(:focus-visible),
.louder .louder__wave:focus:not(:focus-visible) {
  outline: none;
}
.louder .louder__btn:focus-visible,
.louder .louder__wave:focus-visible {
  outline: 2px solid var(--louder-button-color);
  outline-offset: 3px;
}
/* The icon is a share of the inside of the circle, so it scales with the player height and the border.
   At most 70%: the play icon only reaches the circle above 80%, so this leaves some room at any size. */
.louder .louder__btn svg {
  --louder-icon-px: calc((var(--louder-button-size) - 2 * var(--louder-button-border)) * min(var(--louder-icon-size), 70) / 100);
  width: var(--louder-icon-px);
  height: var(--louder-icon-px);
  fill: currentColor;
}

.louder .louder__track {
  flex: 1;
  min-width: 0;
}
.louder .louder__wave {
  display: block;
  width: 100%;
  height: var(--louder-button-size);
  cursor: pointer;
  touch-action: none;
}
.louder.is-scrubbing .louder__wave {
  cursor: ew-resize;
}
/* The audio couldn't be loaded; the button stays usable to try again. */
.louder.is-error .louder__btn {
  border-style: dashed;
  opacity: 0.5;
}

.louder .louder__time {
  margin-top: 6px;
  text-align: center;
  font-size: var(--louder-time-size);
  line-height: 1.2;
  font-variant-numeric: tabular-nums; /* digits don't jiggle as the time changes */
  color: var(--louder-time-color);
}
/* time_align="player": centered under the whole player instead of the waveform, by reaching back
   across the button and the gap. */
.louder[data-time-align="player"] .louder__time {
  margin-left: calc(-1 * (var(--louder-button-size) + var(--louder-gap)));
}