@import 'colors';
@import 'mixins';

.music_list {
    padding: 2rem 3rem 1.5rem 3rem;
    max-height: 55rem;
    width: 35rem;
    border-radius: 1.5rem;
    background: $white;
    transition: all .14s ease-out;
    box-shadow: 0px .5rem 1.5rem rgba(0, 0, 0, .35);

    .header {
        @include flexCenter;
        justify-content: flex-start;
        font-size: 2rem;
        color: $lightblack;

        span {
            margin-left: 1rem;
        }
    }

    ul {
        margin: 1rem 0;
        max-height: 50rem;
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: .3rem;
            height: .3rem;
        }
        &::-webkit-scrollbar-thumb {
            background: $orange;
        }
        &::-webkit-scrollbar-track {
            background: rgb(221, 221, 221);
        }

        li {
            @include flexCenter;
            list-style: none;
            cursor: pointer;
            padding: 1rem 1rem 1rem 0;
            color: $lightblack;
            border-bottom: .1rem solid #e5e5e5;

            &:last-child {
                border-bottom: 0px;
            }

            .row {
                span {
                font-size: 1.8rem;
                }
                p {
                    font-size: 1.1rem;
                    opacity: .9;
                }
            }
            
            .audio-duration {
                font-size: 1.5rem;
            }

            &:hover {
                background: rgba(0,0,0,.03);
            }
        }
        
        .playing {
            color: $orange;
            pointer-events: none;
            font-weight: 500;
            
        }
    }
}