/* Water Tower Music — 30-second track preview buttons
 *
 * The release page is black-on-white, so the button is solid black like the
 * theme's STREAM / BUY button. Selectors are deliberately heavy
 * (.wtm-track button.wtm-tp-btn) and the box properties use !important:
 * Bootstrap's button reset and the theme's own .btn rule
 * (black background, 50px radius, 10px 50px padding, 200px min-width)
 * otherwise win and blow the circle out of shape. */

.wtm-track button.wtm-tp-btn,
.wtm-track button.wtm-tp-btn:hover,
.wtm-track button.wtm-tp-btn:focus,
.wtm-track button.wtm-tp-btn:active {
  all: unset;                                   /* drop every inherited button style first */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 none transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: #000 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, opacity .15s ease !important;
  overflow: visible !important;
}
.wtm-track button.wtm-tp-btn:hover { transform: scale(1.06) !important; }
.wtm-track button.wtm-tp-btn:focus-visible { outline: 2px solid #000 !important; outline-offset: 2px !important; }

.wtm-track .wtm-tp-ring { position: absolute; inset: 0; pointer-events: none; }
.wtm-track .wtm-tp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.wtm-track .wtm-tp-track { fill: none; stroke: rgba(0,0,0,.3); stroke-width: 1.5; }
.wtm-track .wtm-tp-progress { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.wtm-track .wtm-tp-icon { position: relative; display: block; }

/* play triangle */
.wtm-track .wtm-tp-icon-play {
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #000;
}
/* pause bars */
.wtm-track .wtm-tp-icon-pause {
  display: none; width: 10px; height: 12px;
  border-left: 3px solid #000; border-right: 3px solid #000;
  box-sizing: border-box;
}

.wtm-track .wtm-tp-btn.is-playing .wtm-tp-icon-play,
.wtm-track .wtm-tp-btn.is-loading .wtm-tp-icon-play { display: none; }
.wtm-track .wtm-tp-btn.is-playing .wtm-tp-icon-pause { display: block; }
.wtm-track .wtm-tp-btn.is-loading .wtm-tp-track { stroke: rgba(0,0,0,.12); }
.wtm-track .wtm-tp-btn.is-loading .wtm-tp-ring svg { animation: wtm-tp-spin .9s linear infinite; }
.wtm-track .wtm-tp-btn.is-loading .wtm-tp-progress { stroke-dashoffset: 75 !important; }
.wtm-track button.wtm-tp-btn.is-error { opacity: .3 !important; cursor: default !important; }
.wtm-track.wtm-tp-row-active strong { text-decoration: underline; text-decoration-color: rgba(0,0,0,.45); }

@keyframes wtm-tp-spin { to { transform: rotate(270deg); } }

@media (prefers-reduced-motion: reduce) {
  .wtm-track button.wtm-tp-btn, .wtm-track .wtm-tp-progress { transition: none !important; }
  .wtm-track .wtm-tp-btn.is-loading .wtm-tp-ring svg { animation: none; }
}