/**
 * SYNAIKIDO SoundArts - Audioplayer Visual Theme
 * Site-specific visual styles for the audioplayer frontend.
 */

/* Prerendered controls have no usable behavior until their element upgrades. */
audio-player:not(:defined) {
    display: none;
}

audio-player {
    --main-color: rgba(255, 255, 255, 1);
    --font-color: var(--site-color-text-primary);
    --font-light-color: var(--site-color-text-muted);
    --main-contrast-color-superlight: var(--site-surface-muted);
    --main-contrast-color-light: var(--site-surface-hover);
    --main-contrast-color-mediumlight: var(--site-surface-active);
    --main-contrast-color-medium: var(--site-color-progress);
    --player-glass-bg: var(--site-surface-glass);
    --shadow: var(--site-shadow-glass);
    --cover-shadow: var(--site-shadow-cover);
    --banner-bg: var(--site-color-banner-bg);
    --banner-text: var(--site-color-text-inverse);
    --buffer-progress-bg: var(--site-surface-progress-buffer);
    --spinner-border: var(--site-color-spinner);
    --spinner-border-transparent: var(--site-color-spinner-transparent);
    --play-overlay-bg: var(--site-color-cover-overlay);
    --main-border-radius: var(--site-radius-surface);

    --button-active-background-color: var(--main-contrast-color-mediumlight);
    --button-hover-background-color: var(--main-contrast-color-light);
    --progressbar-background-color: var(--main-contrast-color-light);
    --progressbar-progress-color: var(--main-contrast-color-medium);
    --artwork-border-radius: var(--site-radius-artwork);
    --button-border-radius: var(--site-radius-control);
    --progress-bar-border-radius: var(--site-radius-progress);
    --progress-bar-progress-border-radius: var(--site-radius-progress-fill);
    --playback-options-border-radius: var(--button-border-radius);
    --credits-border-radius: var(--button-border-radius);

    backdrop-filter: var(--site-backdrop-blur);
    -webkit-backdrop-filter: var(--site-backdrop-blur);
    border-radius: var(--site-radius-sheet);
    color: var(--font-color);
    background-color: var(--player-glass-bg);
    box-shadow: var(--shadow);
}

body[color-scheme="dark"] audio-player {
    --main-color: rgba(20, 20, 20, 1);
}

body[color-scheme="dark"] audio-player audio-player-controls [data-audioplayer-icon],
body[color-scheme="dark"] audio-player audio-player-info > [data-audioplayer-icon] {
    filter: brightness(0) invert(1);
}

audio-player[audioversion="raw"] cover-image {
    filter: grayscale(100%);
}

audio-player[audioversion="raw"] audio-player-raw,
audio-player[random="on"] audio-player-random,
audio-player[levelmatch="on"] audio-player-level-match,
audio-player[list="on"] audio-player-list,
audio-player audio-title audio-player-info[info-content-shown] {
    background-color: var(--button-active-background-color);
}

audio-player-on-playback-cover,
audio-player audio-title audio-player-details audio-player-artwork img,
audio-player audio-title audio-player-details audio-player-artwork audio-player-play-overlay {
    border-radius: var(--artwork-border-radius);
}

audio-player-on-playback-cover-art > img,
audio-player-cover-swipe-visual > img {
    box-shadow: var(--cover-shadow);
}

raw-audio-banner::after,
level-match-banner::after {
    background: var(--banner-bg);
    color: var(--banner-text);
    font-weight: 900;
    letter-spacing: 0.2em;
    text-align: center;
}

audio-player-on-playback-info-pane [holds="credit-key"],
audio-player-on-playback-info-pane [holds="releasedate"],
audio-player-on-playback-artist,
audio-player audio-title[list-group-start]::before,
audio-player audio-title audio-player-details audio-player-artists,
audio-player audio-title [holds="credit-key"],
audio-player audio-title [holds="releasedate"] {
    color: var(--font-light-color);
}

audio-player-on-playback-title {
    font-weight: 900;
}

audio-player audio-player-controls audio-player-playback-controls>*,
audio-player audio-title audio-player-info {
    border-radius: var(--button-border-radius);
}

audio-player audio-player-controls audio-player-playback-options>* {
    border-radius: var(--playback-options-border-radius);
}

audio-player audio-player-controls audio-player-playback-options>* span {
    font-weight: 900;
}

@media (hover: hover) {

    audio-player audio-player-controls audio-player-playback-controls>*:hover,
    audio-player audio-player-controls audio-player-playback-options>*:hover,
    audio-player audio-title audio-player-info:hover {
        background-color: var(--button-hover-background-color);
    }
}

audio-player audio-player-controls audio-player-playback-controls>*:active,
audio-player audio-player-controls audio-player-playback-options>*:active,
audio-player audio-title audio-player-info:active {
    background-color: var(--button-hover-background-color);
}

audio-player audio-player-controls audio-player-progress-bar,
audio-player-volume audio-player-volume-bar {
    background-color: var(--progressbar-background-color);
    border-radius: var(--progress-bar-border-radius);
}

audio-player audio-player-controls audio-player-progress-bar audio-player-buffer-progress {
    background-color: var(--buffer-progress-bg);
}

audio-player audio-player-controls audio-player-progress-bar audio-player-progress,
audio-player-volume audio-player-volume-level {
    background-color: var(--progressbar-progress-color);
    border-radius: var(--progress-bar-progress-border-radius);
}

audio-player[waiting] audio-player-controls audio-player-elapsed-time::after {
    border: 1px solid var(--spinner-border);
    border-top-color: var(--spinner-border-transparent);
    border-radius: 50%;
}

audio-player audio-title[list-group-start]::before {
    border-top: 1px solid var(--main-contrast-color-mediumlight);
}

audio-player audio-title[list-group-start]:first-child::before {
    border-top: none;
}

audio-player audio-title {
    border-color: var(--spinner-border-transparent);
}

audio-player audio-title audio-player-details audio-player-artwork audio-player-play-overlay {
    background-color: var(--play-overlay-bg);
}

audio-player audio-title audio-player-details audio-player-artwork audio-player-play-overlay > [data-audioplayer-icon] {
    filter: invert(1);
}

audio-player audio-title [holds="credits"] {
    border-radius: var(--credits-border-radius);
    /* background-color: var(--main-contrast-color-superlight); */
}

@media (max-width: 768px) {
    audio-player {
        box-sizing: border-box;
        max-width: calc(100vw - 2rem);
    }

    audio-player audio-title,
    audio-player audio-title audio-player-info,
    audio-player audio-title audio-player-info > [data-audioplayer-icon] {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    audio-player audio-player-controls audio-player-playback-options {
        margin-inline: 0;
    }
}