Untitled

.fnd-playlist {
    height: 600px;
    overflow: auto;

    @media only screen and (max-width:1200px) {
        height: 450px;
    }

    @media only screen and (max-width:992px) {
        border: 1px solid #333;
        border-radius: 8px;
        padding: 18px 12px 12px 12px !important;
    }

    &--noHeight {
        height: revert;
        overflow: revert;

        &::after {
            content: "";
            all: revert;
        }

        @media only screen and (max-width:1200px) {
            height: revert;
        }

        @media only screen and (max-width:992px) {
            height: revert;
        }
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
    }

    &::-webkit-scrollbar {
        width: 4px;
        background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #333;
        border-radius: 3rem;
    }

    &::-webkit-scrollbar-track-piece:end {
        background: transparent;
    }

    &::-webkit-scrollbar-track-piece:start {
        background: transparent;
    }

    &__item {
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 4px;
        width: 100%;
        text-align: left;
        padding: 4px;
        overflow: hidden;
        appearance: none;
        box-shadow: none;
        transition: all .2s;
        display: block;
        cursor: pointer;

        &:hover {
            background-color: rgba(41, 42, 51, 0.5);
        }

        &-active {
            background-color: rgba(62, 63, 71, 0.5);
            border-color: rgba(136, 136, 136, 0.24);
            &:hover {
                background-color: rgba(62, 63, 71, 0.5);
                border-color: rgba(136, 136, 136, 0.24);
            }
        }

        img {
            width: 115px;
            height: 65px;
            object-fit: cover;
            display: block;
            border-radius: 2px;

            @media only screen and (max-width:576px) {
                width: 95px;
                height: 60px;
            }
        }

        &-progress {
            width: 100%;
            height: 2px;
            background-color: #8D93A1;
            border-radius: 4px;
            position: relative;

            &::before {
                content: "";
                width: var(--fnd-playlist-progress);
                height: 2px;
                background-color: #FDB740;
                border-radius: 4px;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}