/* Color and type overrides; music.css owns layout, states and motion. */
.music-dock,
.music-player-dialog {
  --music-red: #f42c26;
  --music-white: #fffcf4;
  --music-ink: #342f32;
  --music-yellow: #ffc4d2;
  --music-cream: var(--music-white);
}

.music-dock {
  color: var(--music-ink);
}

.music-launcher {
  border-color: #342f3224;
  background: var(--music-white);
  box-shadow: 0 4px 14px #342f3220;
}

.music-vinyl {
  border-color: #fffcf47a;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0 3px,
    #fffcf417 3.4px 4px
  ), var(--music-ink);
  box-shadow: inset 0 0 0 6px #00000012,
    inset 0 0 0 1px #fffcf429;
}

.music-record-label {
  border-color: var(--music-red);
  background: var(--music-red);
  box-shadow: 0 0 0 3px var(--music-ink);
}

.music-record-label i {
  border-color: var(--music-white);
  background: var(--music-ink);
}

#music-dock #music-toggle {
  color: var(--music-ink);
}

#music-dock #music-toggle::before {
  border-color: #342f3224;
  background: var(--music-yellow);
  box-shadow: 0 2px 7px #342f3220;
}

.music-lyric-peek,.music-gesture-hint {
  color: var(--music-ink);
}

[data-music-lyric-current] {
  color: var(--music-ink);
}

.music-dock[data-music-state=error] .music-launcher {
  border-color: var(--music-red);
}

.music-player-dialog {
  --music-ink: #211715;
  --music-lyric-red: #ba2e28;
  color: var(--music-ink);
  background: var(--music-white);
  color-scheme: light;
}

.music-player-dialog::backdrop {
  background: #fffcf4;
  backdrop-filter: none;
}

.music-player-dialog::before {
  background: none;
}

.music-player-header,
.music-track-kicker,
.music-track-heading p,
.music-track-heading p span,
.music-time,
.music-secondary-control,
.music-player-bottom {
  color: var(--music-ink);
}

.music-edition,
.music-track-heading h2,
.music-lyric-symbol {
  font-family: var(--sans);
}

.music-track-heading h2 {
  font-weight: 700;
  letter-spacing: .015em;
}

.music-player-dialog button:focus-visible,
.music-player-dialog input:focus-visible {
  outline-color: var(--music-red);
}

.music-icon-button {
  color: var(--music-ink);
  border-radius: 50%;
  background: var(--music-white);
}

.music-vinyl-large {
  box-shadow: 0 9px 20px #342f3226,
    inset 0 0 0 7px #00000012;
}

.music-record-arm {
  border-color: var(--music-ink);
  filter: drop-shadow(0 2px 2px #342f3224);
}

.music-record-arm::before {
  border-color: var(--music-ink);
  background: var(--music-yellow);
}

.music-record-arm::after {
  background: var(--music-ink);
}

.music-lyrics button {
  color: var(--music-ink);
  opacity: .85;
}

.music-lyrics button:disabled {
  opacity: .65;
}

.music-lyrics button.is-current {
  color: var(--music-lyric-red);
  opacity: 1;
  text-shadow: none;
}

.music-seek::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--music-lyric-red) var(--music-progress),
    #342f3288 var(--music-progress)
  );
}

.music-seek::-moz-range-track {
  background: #342f3288;
}

.music-seek::-moz-range-progress {
  background: var(--music-lyric-red);
}

.music-seek::-webkit-slider-thumb {
  background: var(--music-lyric-red);
  box-shadow: 0 0 0 5px #f42c2617;
}

.music-seek::-moz-range-thumb {
  background: var(--music-lyric-red);
}

.music-main-play {
  color: var(--music-ink);
  background: var(--music-yellow);
  box-shadow: 0 4px 14px #342f3226;
}

.music-main-play:active {
  background: var(--music-yellow);
}