.musicExplorer {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    gap: 20px;

    &.search-focused {
        .feed_main {
            height: 0px;
            opacity: 0;
        }
    }

    .feed_main {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;

        gap: 50px;

        transition: all 0.2s ease-in-out;
    }

    .playlistExplorer_section {
        display: flex;
        flex-direction: column;

        overflow: visible;

        .playlistExplorer_section_header {
            display: flex;
            flex-direction: row;

            align-items: center;

            margin-bottom: 20px;

            h1 {
                font-size: 1.5rem;
                margin: 0;
            }

            .playlistExplorer_section_header_actions {
                display: flex;
                flex-direction: row;

                gap: 10px;

                align-self: center;

                margin-left: auto;
            }
        }

        .playlistExplorer_section_list {
            display: grid;

            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);

            grid-column-gap: 10px;
            grid-row-gap: 10px;
        }

        // add a media query to change the grid-template-columns when the screen can't fit 3 columns
        @media (max-width: 1500px) {
            .playlistExplorer_section_list {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(3, 1fr);
            }
        }

        @media (max-width: 800px) {
            .playlistExplorer_section_list {
                grid-template-columns: repeat(1, 1fr);
                grid-template-rows: repeat(6, 1fr);
            }
        }
    }
}

.playlistItem {
    position: relative;
    display: flex;
    flex-direction: row;

    cursor: pointer;

    width: 10vw;
    height: 10vh;

    min-width: 400px;
    max-width: 800px;

    overflow: visible;

    box-sizing: border-box !important;

    border-radius: 12px;

    transition: all 0.2s ease-in-out;

    background-color: var(--background-color-accent);
    border-radius: 8px;

    &.cover-hovering {
        .playlistItem_cover {
            transform: scale(1.1);

            .playlistItem_cover_mask {
                opacity: 1;
            }
        }

        .playlistItem_info {
            transform: translateX(10px);
        }
    }

    .image-wrapper {
        width: 10vh;
        height: 10vh;

        border-radius: 8px;

        overflow: hidden;

        img {
            width: 100%;
            height: 100%;

            object-fit: cover;
        }
    }

    .playlistItem_cover {
        position: relative;

        height: 10vh;

        transition: all 0.2s ease-in-out;

        img {
            width: 100%;
            height: 100%;

            object-fit: cover;
            border-radius: 8px;

            background-color: black;

            z-index: 50
        }

        .playlistItem_cover_mask {
            position: absolute;

            top: 0;
            left: 0;

            display: flex;

            align-items: center;
            justify-content: center;

            width: 100%;
            height: 100%;

            opacity: 0;

            transition: all 0.2s ease-in-out;

            z-index: 55;

            background-color: rgba(var(--layoutBackgroundColor), 0.6);
            color: var(--text-color);

            font-size: 3rem;
        }
    }

    .playlistItem_info {
        display: flex;
        flex-direction: column;

        width: 100%;

        padding: 10px;

        max-width: calc(100% - 10vh);

        transition: all 0.2s ease-in-out;

        .playlistItem_info_title {
            font-size: 1rem;
            font-weight: 600;

            color: var(--background-color-contrast);
            font-family: "Space Grotesk", sans-serif;

            overflow: hidden;

            &:hover {
                text-decoration: underline;
            }

            h1,
            h4 {
                overflow: hidden;

                text-overflow: ellipsis;
                //white-space: nowrap;
                margin: 0;

                //calculate the max height of the title using 10vh and 30px for the userPreview and padding
                height: 5vh;
            }
        }

        // set userPreview to the bottom of the playlistItem_info
        .userPreview {
            margin-top: auto;
            font-size: 0.8rem;

            h1 {
                font-size: 0.8rem;
            }

            .avatar {
                display: flex;
                flex-direction: row;

                align-items: center;
                justify-content: center;

                width: 30px;
                height: 30px;
            }
        }
    }

    .playlistItem_actions {
        display: flex;
        flex-direction: column;

        align-self: flex-end;
        justify-self: flex-end;

        justify-content: center;
        align-items: center;

        height: 100%;

        padding: 10px;

        .ant-btn {
            svg {
                margin: 0 !important;
            }
        }
    }
}