/* Volume slider need to be vertical */
#volume-container > .navbar-dropdown {
    writing-mode: vertical-lr;
    padding-left: 1em;
    padding-top: 20em;
    direction: rtl;
}
#volume-container > .navbar-dropdown > input {
    height: 20em;
}

/* Song container image is always 256x256 */
.song {
    width: 256px;
}

/* Elements we can click */
.song-img, h2 {
    cursor: pointer;
}

/* Fixed song description size, overflow is hidden with an ellipsis */
.song p {
    height: 3em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* https://github.com/jgthms/bulma/issues/2398 */
.card:last-child {
    margin-bottom: 1.5rem;
}

/* Used by "repeat" button of the player */
.unactive {
    color: rgb(131, 131, 131);
}

/* Default navbar are uh */
.navbar-dropdown {
    z-index: 20;
    background-color: var(--bulma-scheme-main);
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 10px;
}

/* Dropdown shit itself on mobile */
@media screen and (max-width: 1024px) {
    #settings-dropdown {
        position: fixed;
        left: 0;
        top: var(--bulma-navbar-height);
        width: 100%;
        height: 100%;
    }

    #volume-container-dropdown {
        position: fixed;
        top: var(--bulma-navbar-height);
        height: 20em;
    }
}

/* Audio player */
#full-player {
    max-width: 450px;
}

#full-player img {
    width: 450px;
    border-radius: 25px;
    margin-bottom: 10px;
}

#full-player input[type=range] {
    width: 100%;
}

/* Playlist */
#playlist {
    bottom: 0;
    right: 0;
    width: 20em;
    position: fixed;
    z-index: 2;
    margin-bottom: 0;
}

#playlist .next-song {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 50em) {
    #playlist {
        width: 100%;
    }
}

/* Playlist display */
.playlist-img-container {
    height: calc(125px * 2);
}

#playlistlist img {
    width: 125px;
    height: 125px;
}

/* Clean spaces a bit */
#actions {
    margin-bottom: 10px;
}

/* Adjust sizes on mobile */
@media screen and (max-width: 1024px) {
    .playlist-img-container {
        height: calc(75px * 2);
    }

    #playlistlist img {
        width: 75px;
        height: 75px;
    }

    .song {
        width: 150px;
    }
}

@media screen and (max-width: 450px) {
    #full-player {
        max-width: 100%;
    }
}

/* Selected song */
.current {
    box-shadow: 0 0.5em 1em -0.125em rgba(50, 110, 167, 0.2), 0 0px 0 1px rgba(50, 110, 167, 0.05) !important;
}