@import "colors.css";

.songs {
    list-style: none;
    padding: 0;
    > a {
        color: inherit;
        text-decoration: none;
        > li {
            display: flex;
            gap: 5px;
            margin: .5em;
            padding: .6em;
            border: 1px solid var(--text-color);
            border-radius: var(--border-radius);
            @media (prefers-color-scheme: dark) {
                border: 1px solid var(--text-color-dark);
            }
            .number { font-weight: bolder; }
            .name { flex-grow: 99; }
            &:hover {
                background-color: var(--secondary-color);
                transition-duration: var(--transition-duration);
                @media (prefers-color-scheme: dark) {
                    background-color: var(--secondary-color-dark);
                }
            }
        }
    }
}
ul.songs {
    width: 100%;
    margin: 1em auto;
    li {
        display: inline-block;
        margin: .2em;
    }
}
img.guitar-icon, img.music-icon {
    width: 1em;
    padding: 0 0.2em;
}
img.guitar-icon {
    /* Green color filter */
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(55deg) brightness(119%) contrast(119%);
}
img.music-icon {
    /* Orange color filter */
    filter: invert(46%) sepia(100%) saturate(681%) hue-rotate(360deg) brightness(106%) contrast(105%);
}
p { img.guitar-icon, img.music-icon {
        vertical-align: -0.25em;
}}