:host {
    /*
    color palette https://coolors.co/ffc759-364156-ff7b9c-babfd1-e8e9ed 
    #E8E9ED    
    #BABFD1
    #FF7B9C
    #364156
    
    */
    --text-color: #E8E9ED;
    --song-hover-text-color: #E8E9ED;
    --song-sel-text-color: #364156;
    --song-player-bg-color: #FFC759;
    --song-bg-color: #364156;
    --song-hover-bg-color: #BABFD1;
    --song-sel-bg-color: #FF7B9C;
    --border-color: #364156;

    /** icons https://stackoverflow.com/a/27053825/1211451 */
    --play-icon: "\25B6";
    --skip-start-icon: "\23EE";
    --pause-icon: "\23F8";
    --download-icon: "\2B73";
}


:host {
    display: block;
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-family: Verdana;
    background-color: var(--song-player-bg-color);
    border-radius: 5px;
}

.songs {
    border-radius: 5px;
    overflow: hidden;
}

.song {
    padding: 0.5em;
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--song-bg-color);
}

.song.selection {
    color: var(--song-sel-text-color);
    background-color: var(--song-sel-bg-color);
}

.song.selection:before {
    content: var(--play-icon) "   ";
}

.song:not(.selection):hover {
    color: var(--song-hover-text-color);
    background-color: var(--song-hover-bg-color);
}

audio {
    margin: 5px;
}

.control {
    cursor: pointer;
    display: inline-block;
    font-size: 110%;
    font-weight: bold;
    padding-inline: 15px;
    padding-block: 5px;
    margin: 5px;
    border-radius: 10px;
    color: var(--text-color);
    background-color: var(--song-bg-color);
}

.controls .timeline {
    width: 100%;
    accent-color: var(--song-bg-color);
    /* background-color: var(--song-bg-color); */
}

.control.timemeter {
    cursor: unset;
}

.control.rate {
    padding: 2px 5px 1px 5px;
    background-color: var(--song-player-bg-color);
    color: var(--song-bg-color);
    cursor: default;
}

.control.rate label {
    padding: 0px 8px 0px 0px;
}

.control.rate input {
    margin: 0;
    padding: 0;
    border: none;
    background-color: var(--song-player-bg-color);
    color: var(--song-bg-color);
}

.timemeter .time {
    display: inline-block;
    cursor: pointer;
}

.timemeter .duration {
    cursor: unset;
    display: inline-block;
}

.controls .timeline::-webkit-progress-bar {
    background-color: #000;
    width: 100%;
}

.controls .timeline::-moz-progress-bar,
.controls .timeline::-webkit-progress-value {
    background: red !important;
}


.controls .play.pause {
    color: var(--song-sel-text-color);
    background-color: var(--song-sel-bg-color);
}

.controls .play:before {
    font-family: "Segoe UI Symbol";
    content: var(--play-icon);
}

.controls .skip-to-start:before {
    font-family: "Segoe UI Symbol";
    content: var(--skip-start-icon);
}

.controls .play.pause:before {
    font-family: "Segoe UI Symbol";
    content: var(--pause-icon);
}

.controls .loop:before {
    content: "loop";
}

.controls .loop.selected {
    color: var(--song-sel-text-color);
    background-color: var(--song-sel-bg-color);
}

.controls .download {
    text-decoration: unset;
}

.controls .download:before {
    content: var(--download-icon);
}


.input-A,
.input-B {
    width: 80px;
    font-size: 110%;
    font-weight: bold;
    padding-inline: 15px;
    padding-block: 5px;
    margin: 5px;
    border-radius: 5px;
    border-color: var(--border-color);
}

.A:before {
    content: "A";
}

.B:before {
    content: "B";
}