@font-face {
    font-family: "Noto Sans";
    src: url(./fonts/NotoSans-Regular.ttf);
}

body {
    margin: 0px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    --border-size: 1px;
}
* {
    font-family: "Noto Sans";
}

#currSongContainer {
    display: grid;
    grid-template-columns: calc(46px + var(--border-size) * 4 + 6px);
    width: 50vw;
    /* margin: auto; */
    margin-top: 8px;
    padding: 4px;
    border: 2px solid black;
    background-color: lightgray;
}
#currSongName {
    grid-column: span 3;
    font-size: 18px;
}
#currSongArtist {
    grid-column: span 3;
    font-size: 14px;
}
#currSongPlayButton {
    grid-row: span 2;
    width: calc(46px + var(--border-size) * 4);
    height: calc(46px + var(--border-size) * 4);
}
#currSongTime {
    grid-column: 2;
    font-size: 12px;
    margin-left: 2px;
}
#currSongLength {
    grid-column: 3;
    font-size: 12px;
    text-align: right;
    margin-right: 2px;
}
#currSongProgress {
    appearance: none;
    grid-column: span 2;
    border: 2px solid black;
    height: 30px;
    margin: 2px;
    /* background-color: darkgray; */
    cursor: pointer;
}
#currSongProgress::-webkit-slider-thumb {
    appearance: none;
    width: 8px;
    height: 30px;
    background-color: dodgerblue;
}

#playlistContainer {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 50vw;
    /* margin: auto; */
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 4px;
    overflow: auto;
    border: 2px solid black;
    background-color: lightgray;
}
#playlistName {
    display: flex;
    align-items: center;
    font-size: 18px;
}
#playlistDescription {
    grid-column: 1;
    font-size: 14px;
}
#playlistSettings {
    grid-row: 1 / span 2;
    grid-column: 2;
}
#volumeSettings {
    grid-row: 1;
    grid-column: 2 / span 4;
    display: flex;
}
#volumeSlider {
    appearance: none;
    box-sizing: border-box;
    border: 2px solid black;
    height: 20px;
    margin: 0px;
    margin-bottom: 2px;
    /* margin: 2px; */
    /* background-color: darkgray; */
    cursor: pointer;
}
#volumeSlider::-webkit-slider-thumb {
    appearance: none;
    width: 8px;
    height: calc(20px - var(--border-size) * 4);
    background-color: dodgerblue;
}
#playlistEditButton, .songEditButton, #volumeButton, #lazyReadButton, #uploadButton, #autoplayButton, #loopButton, #shuffleButton {
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 2px;
    margin-right: 0px;
    margin-left: 4px;
    border: 2px solid black;
    cursor: pointer;
    float: right;
    background-size: 100%;
    box-sizing: border-box;
    background-color: buttonface;
}
#playlistEditButton, .songEditButton {
    float: none;
    background-image: url("/img/save.svg");
}
#lazyReadButton {
    background-image: url("/img/lazy-read.svg");
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
}
#uploadButton {
    background-image: url("/img/upload.svg");
}
#autoplayButton {
    background-image: url("/img/autoplay.svg");
}
#loopButton {
    background-image: url("/img/loop.svg");
}
#shuffleButton {
    background-image: url("/img/shuffle.svg");
}
#lazyReadButton:checked, #autoplayButton:checked, #loopButton:checked, #shuffleButton:checked {
    background-color: dodgerblue;
}
#shuffleButton:disabled {
    background-color: darkgray;
}
#volumeButton {
    float: left;
    margin: 0px;
    margin-right: 4px;
    margin-bottom: 2px;
}
#playlistSongs {
    grid-column: span 2;
    padding: 4px;
    padding-top: 0px;
    margin-top: 2px;
    border: 2px solid black;
    background-color: white;
    overflow-y: scroll;
}

.song {
    display: grid;
    grid-template-columns: auto 1fr 48px;
    padding: 4px;
    margin-top: 4px;
    border: 2px solid black;
    background-color: lightgray;
}
.songName {
    display: flex;
    align-items: center;
    font-size: 18px;
}
.songArtist {
    grid-row: 2;
    font-size: 14px;
}
.songLength {
    grid-row: span 2;
    grid-column: 2;
    font-size: 18px;
    margin-left: 4px;
    padding-left: 4px;
    border-left: 2px solid black;
}
.songPlayButton {
    grid-row: span 2;
    grid-column: 3;
    width: 44px;
    height: 44px;
}
#currSongPlayButton, .songPlayButton {
    background-color: green;
    margin: 2px;
    border: 2px solid black;
    cursor: pointer;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/img/play.svg");
}
#currSongPlayButton.playing, .songPlayButton.playing {
    background-color: red;
    background-image: url("/img/pause.svg");
}


#modalContainer {
    position: absolute;
    left: 50vw;
    bottom: 100vh;
    width: 50vw;
    padding: 4px 4px;
    border: 2px solid black;
    background-color: #ffffff66;
    text-align: center;
    opacity: 0;
    transition: 400ms ease-in-out transform, 300ms linear opacity, 300ms linear display allow-discrete, 300ms linear overlay allow-discrete;
    transform: translate(-50%, 0vh);
}
#modalContainer[open] {
    opacity: 1;
    transform: translate(-50%, 50vh);
}
@starting-style {
    #modalContainer[open] {
        opacity: 0;
        transform: translate(-50%, 0vh);
    }
}
#modalContainer::backdrop {
  background-color: #00000000;
  transition:
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete,
    background-color 0.3s;
}

#modalContainer[open]::backdrop {
    background-color: #00000066;
}
@starting-style {
    #modalContainer[open]::backdrop {
        background-color: #00000000;
    }
}
#modalTitle, #modalContent {
    width: calc(100% - 16px);
    margin: 8px;
}
#modalTitle {
    font-size: 32px;
    font-weight: bold;
}
#modalContent {
    font-size: 14px;
}
#modalInputs {
    display: grid;
    width: 50%;
    margin: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    gap: 4px;
    grid-template-columns: auto 1fr;
}
.modalInput {
    appearance: none;
    border: 2px solid black;
}
.modalButton {
    width: 96px;
    background-size: 750% 400%;
    font-weight: 500;
    font-size: 16px;
    border: 4px outset darkgray;
    margin: 4px;
    cursor: pointer;
}
.modalButton:active {
    border-style: inset;
}
#modalYes {
    background-color: lime;
}
#modalNo {
    background-color: red;
}
#modalOk {
    background-color: darkgray;
}