/* Shared Home, Shop and event carousel controls. */
.de-spotlight-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  margin: 12px auto 0;
}
.de-spotlight-controls[hidden] { display: none; }

/* MEC offsets button SVGs and fills their paths with high-specificity rules. */
.de-spotlight-controls button > svg {
  display: block;
  flex: none;
  margin: 0 !important;
}

.de-spotlight-controls button svg path { fill: none !important; }

:is(.de-home, .de-shop) .de-spotlight-controls button,
:is(#site-content .de-event-media, .bb-artists) .de-spotlight-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--bb-accent, var(--de-gold, currentcolor));
  cursor: pointer;
}

:is(.de-home, .de-shop) .de-spotlight-controls button:hover,
:is(#site-content .de-event-media, .bb-artists) .de-spotlight-controls button:hover { background: rgba(228, 178, 75, 0.12); }

:is(.de-home, .de-shop) .de-spotlight-controls button:active,
:is(#site-content .de-event-media, .bb-artists) .de-spotlight-controls button:active { background: rgba(228, 178, 75, 0.24); }

.de-spotlight-indicators {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.de-spotlight-indicators::-webkit-scrollbar { display: none; }

:is(.de-home, .de-shop, .bb-artists, #site-content .de-event-media) .de-spotlight-indicators button {
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
}

:is(.de-home, .de-shop, .bb-artists, #site-content .de-event-media) .de-spotlight-controls button:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: -3px;
}

.de-spotlight-indicators button::after {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: 1px;
  box-sizing: border-box;
  border: 1px solid currentcolor;
  background: transparent;
  opacity: .8;
  transition: opacity 240ms ease;
}

.de-spotlight-indicators button[aria-current="true"]::after {
  background: currentcolor;
  opacity: 1;
}

.de-spotlight-controls [data-paused="false"] .de-play-icon,
.de-spotlight-controls [data-paused="true"] .de-pause-icon { display: none; }

@media (max-width: 600px) {
  .de-spotlight-controls { margin: 8px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  .de-spotlight-indicators button::after { transition: none; }
}