:root {
    font: 1rem/1 serif;
    color: oklch(95% 0.15 285);
    fill: oklch(95% 0.15 285);
    accent-color: oklch(65% 0.15 285);
}
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
@keyframes spin {
    from {
        rotate: 0deg;
    }
    to {
        rotate: 360deg;
    }
}
body {
    margin: 0;
    background-image: url(https://assets.skgough.omg.lol/tunes.png);
    background-size: 400px;
    padding: 2rem;
    music-player {
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        --track-height: 3.5rem;
        max-width: 60rem;
        height: calc(8.5 * var(--track-height) + 4rem);
        max-height: calc(100svh - 4rem);
        border-radius: 1.5rem;
        border: 1px solid oklch(35% 0.1 285);
        backdrop-filter: blur(5px);
        background-image:
            url(https://assets.skgough.omg.lol/noise.png),
            linear-gradient(
                to top,
                oklch(45% 0.15 285 / 0.15),
                oklch(45% 0.15 285 / 0.35)
            );
        iframe[src*="youtube.com/embed"],
        div#yt {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
        }
        music-controls {
            padding: 2rem 2rem 1.5rem 2rem;
            grid-column: 2;
            grid-row: 1;
            display: grid;
            grid-template-columns: 1fr max-content 1fr;
            grid-template-rows: max-content max-content 1fr max-content max-content;
            column-gap: 1rem;
            grid-template-areas:
                "art art art"
                "title title title"
                "artist artist artist"
                "previous play next"
                "progress progress progress";
            place-items: center;

            .album-art {
                grid-area: art;
                background-size: 490px;
                background-repeat: no-repeat;
                background-position: center;
                width: 275px;
                height: 275px;
                border-radius: 50%;
                box-shadow: 0 0 1rem 0 transparent;
                transition: box-shadow 0.2s;
                animation: spin 30s infinite linear;
                animation-play-state: paused;
                will-change: rotate;
                &[style*="assets.skgough.omg.lol"] {
                    background-size: 280px;
                }
            }

            .title {
                grid-area: title;
                font: bold 90%/1 serif;
                margin-block-start: 2rem;
            }
            .artist {
                align-self: start;
                grid-area: artist;
                font: 500 90%/2 serif;
            }

            previous-button,
            play-button,
            next-button {
                display: contents;
                button {
                    cursor: pointer;
                    background: transparent;
                    border: 0;
                    padding: 0.5rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    outline: 2px solid transparent;
                    border-radius: 50%;
                    font-size: 0;
                    height: 3rem;
                    width: 3rem;
                    transition:
                        0.1s outline,
                        0.1s fill,
                        0.1s background-color;
                    &:not(:disabled):is(:hover, :focus-visible) {
                        background-image: linear-gradient(
                            to bottom,
                            oklch(65% 0.15 285 / 0.05),
                            oklch(65% 0.15 285 / 0.4)
                        );
                        outline: 1px solid oklch(65% 0.15 285 / 0.3);
                        &:focus-visible {
                            outline: 2px solid oklch(65% 0.15 285);
                        }
                    }
                    &:disabled {
                        display: none;
                    }
                }
            }
            previous-button button {
                grid-area: previous;
                justify-self: end;
            }
            play-button button {
                grid-area: play;
                width: 4rem;
                height: 4rem;
                svg {
                    display: none;
                }
                &:disabled {
                    display: flex;
                    cursor: wait;
                    svg.buffering {
                        display: block;
                    }
                }
            }
            next-button button {
                grid-area: next;
                justify-self: start;
                &:disabled {
                    display: none;
                }
            }
            music-progress {
                grid-area: progress;
                justify-self: stretch;
                display: flex;
                flex-direction: column;
                input {
                    margin: 0;
                    cursor: pointer;
                    &:disabled {
                        cursor: default;
                    }
                    &::-webkit-slider-thumb,
                    &::-moz-range-thumb {
                        cursor: grab;
                    }
                    &:active {
                        cursor: grabbing;
                        &::-webkit-slider-thumb,
                        &::-moz-range-thumb {
                            cursor: grabbing;
                        }
                    }
                }
                .indicator {
                    font-size: 90%;
                    font-weight: 500;
                    margin-block: 0.25rem;
                    text-align: end;
                }
            }
        }

        &[state="playing"] {
            .album-art {
                animation-play-state: running;
                box-shadow: 0 0 1rem 0 hsl(250, 60%, 70%);
            }
            play-button button:not(:disabled) svg.playing {
                display: block;
            }
            .track-list .selected {
                svg.playing {
                    display: block;
                }
                .thumbnail {
                    filter: brightness(0.5);
                }
            }
        }
        &[state="not-playing"]
            play-button
            button:not(:disabled)
            svg.not-playing {
            display: block;
        }
        &[state="paused"] {
            play-button button:not(:disabled) svg.paused {
                display: block;
            }
            .track-list .selected {
                svg.paused {
                    display: block;
                }
                .thumbnail {
                    filter: brightness(0.5);
                }
            }
        }
        &[state="buffering"] {
            play-button button:not(:disabled) svg.buffering {
                display: block;
            }
            .track-list .selected {
                button {
                    cursor: wait;
                    svg.buffering {
                        display: block;
                    }
                    .thumbnail {
                        filter: brightness(0.5);
                    }
                }
            }
        }

        & menu.track-list {
            display: flex;
            flex-direction: column;
            justify-content: stretch;
            list-style: none;
            align-self: stretch;
            overflow-y: auto;
            padding: 2rem 0.35rem 2rem 2rem;
            margin: 0;
            mask-image: linear-gradient(
                transparent,
                rgba(0 0 0 / 0.002) 0.036rem,
                rgba(0 0 0 / 0.008) 0.096rem,
                rgba(0 0 0 / 0.021) 0.18rem,
                rgba(0 0 0 / 0.042) 0.278rem,
                rgba(0 0 0 / 0.075) 0.396rem,
                rgba(0 0 0 / 0.126) 0.54rem,
                rgba(0 0 0 / 0.194) 0.7rem,
                rgba(0 0 0 / 0.278) 0.87rem,
                rgba(0 0 0 / 0.382) 1.06rem,
                rgba(0 0 0 / 0.541) 1.32rem,
                rgba(0 0 0 / 0.738) 1.62rem,
                rgba(0 0 0 / 1) 2rem,
                rgba(0 0 0 / 1) calc(100% - 2rem),
                rgba(0 0 0 / 0.738) calc(100% - 1.62rem),
                rgba(0 0 0 / 0.541) calc(100% - 1.32rem),
                rgba(0 0 0 / 0.382) calc(100% - 1.06rem),
                rgba(0 0 0 / 0.278) calc(100% - 0.87rem),
                rgba(0 0 0 / 0.194) calc(100% - 0.7rem),
                rgba(0 0 0 / 0.126) calc(100% - 0.54rem),
                rgba(0 0 0 / 0.075) calc(100% - 0.396rem),
                rgba(0 0 0 / 0.042) calc(100% - 0.278rem),
                rgba(0 0 0 / 0.021) calc(100% - 0.18rem),
                rgba(0 0 0 / 0.008) calc(100% - 0.096rem),
                rgba(0 0 0 / 0.002) calc(100% - 0.036rem),
                transparent
            );
            li {
                display: contents;
                play-track {
                    display: contents;
                    button {
                        color: oklch(95% 0.15 285);
                        cursor: pointer;
                        width: 100%;
                        background: transparent;
                        border: 0;
                        border-radius: 0.85rem;
                        padding: 0.25rem;
                        outline: 1px solid transparent;
                        display: grid;
                        transition:
                            0.1s background-color,
                            0.1s outline;
                        column-gap: 0.5rem;
                        padding: 0.25rem;
                        grid-template-columns: max-content 1fr;
                        grid-template-rows: max-content max-content;
                        grid-template-areas:
                            "thumbnail title"
                            "thumbnail artist";
                        .thumbnail {
                            grid-area: thumbnail;
                            background-position: center;
                            background-size: 5.35rem;
                            background-repeat: no-repeat;
                            width: 3rem;
                            height: 3rem;
                            border-radius: 0.6rem;
                            outline: 1px solid oklch(35% 0.1 285);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .title {
                            grid-area: title;
                            align-self: end;
                            justify-self: start;
                            text-align: start;
                            font: bold 110%/1.5 serif;
                        }
                        .artist {
                            grid-area: artist;
                            align-self: start;
                            justify-self: start;
                            text-align: start;
                            font: 500 100%/1 serif;
                        }
                        svg {
                            z-index: 1;
                            grid-area: thumbnail;
                            display: none;
                            place-self: center;
                            height: 2rem;
                            width: 2rem;
                        }
                        &:disabled {
                            cursor: default;
                        }
                        &:not(:disabled):is(:hover, :focus-visible) {
                            background-image: linear-gradient(
                                to bottom,
                                oklch(50% 0.125 285 / 0.05),
                                oklch(50% 0.125 285 / 0.35)
                            );
                            outline: 1px solid oklch(65% 0.15 285 / 0.3);
                            &:focus-visible {
                                outline: 2px solid oklch(65% 0.15 285);
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (width < 800px) {
    body {
        padding: 0.5rem;
        music-player {
            height: unset;
            max-height: unset;
            grid-template-columns: 1fr;
            padding: 1rem;
            grid-template-rows: max-content max-content;
            gap: 0;
            & music-controls {
                grid-column: 1;
                grid-row: 1;
                padding-block: 2rem 1rem;
            }
            & menu.track-list {
                padding: 2px;
                grid-column: 1;
                grid-row: 2;
                mask-image: none;
                scrollbar-gutter: auto;
            }
        }
    }
}
@media (pointer: coarse) {
    music-player button:is(:hover, :focus-visible):not(:disabled) svg {
        fill: oklch(95% 0.15 285);
    }
    music-player button:active svg {
        fill: oklch(65% 0.15 285);
    }
}