music-player{
    display: block;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    margin: 10% 0;
}

music-player .grid {
    display: grid;
    width: 100%;
    aspect-ratio: 4;
    grid-template-rows: auto auto 30% 5%;
    grid-template-columns: auto 1fr 1fr;
    grid-column-gap: 2rem;
    grid-template-areas: "cover title title" "cover artist album" "cover links links" "progress progress progress";
}

music-player *{
    min-width: 0;
}

music-player .prerelease{
    height: 2em;
    font-size: 2em;
    background-color: var(--accent-color);
    color: var(--theme-color);
    justify-content: center;
    align-items: center;
    display: none;
}
music-player .prerelease.new{
    display: flex;
}

music-player .cover{
    grid-area: cover;
    height: 100%;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 0;
    cursor: pointer;
}

music-player .playicon{
    grid-area: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    filter: invert(1);
    background-image: url("/assets/images/play.webp");
    opacity: 0.5;
    cursor: pointer;
}
music-player[playing] .playicon{
    background-image: url("/assets/images/pause.webp");
}

music-player .title,
music-player .artist,
music-player .album{
    margin: 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: sans-serif;
    display: flex;
    align-items: center;
}

music-player .title{
    grid-area: title;
    font-size: 3em;
}

music-player .artist{
    grid-area: artist;
    font-size: 2em;
}

music-player .album{
    grid-area: album;
    font-size: 2em;
}
music-player .album::before{
    content: "(";
}
music-player .album::after{
    content: ")";
}

music-player .links{
    grid-area: links;
    display: flex;
    gap: 5%;
    margin: 0.5em 0.25em;
}

music-player music-progress{
    grid-area: progress;
}

music-progress{
    height: 100%;
    width: 100%;
    background: color-mix(in srgb, var(--accent-color), transparent 75%);
    overflow-x: hidden;
}

music-progress .progress{
    height: 100%;
    background: var(--accent-color);
}