@playlistItem_maxWidth: 175px;
@playlistItem_padding: 10px;

@playlistItem_cover_maxSize: calc(@playlistItem_maxWidth - @playlistItem_padding * 2);

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

    cursor: pointer;

    width: @playlistItem_maxWidth;
    max-width: @playlistItem_maxWidth;
    min-width: @playlistItem_maxWidth;

    border-radius: 8px;
    padding: 10px;

    gap: 8px;

    overflow: hidden;

    transition: all 0.2s ease-in-out;

    background-color: var(--background-color-accent);

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

            .playlistItem_cover_mask {
                opacity: 1;
            }
        }

        .playlistItem_info {
            transform: translateY(5px);
        }
    }

    .playlistItem_cover {
        display: flex;
        position: relative;

        width: 100%;
        height: @playlistItem_cover_maxSize;

        max-width: @playlistItem_cover_maxSize;

        transition: all 0.2s ease-in-out;
        z-index: 50;

        overflow: hidden;

        border-radius: 12px;

        .image-wrapper {
            width: 100%;
        }

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

            object-fit: cover;
        }

        .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%;
        height: 82px;

        transition: all 0.2s ease-in-out;

        &:hover {
            .playlistItem_info_title {
                text-decoration: underline;
            }
        }

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

            color: var(--background-color-contrast);

            h1,
            h4 {
                overflow: hidden;

                text-overflow: ellipsis;
                white-space: nowrap;

                margin: 0;
            }
        }

        .playlistItem_info_subtitle {
            color: var(--text-color);
            font-size: 0.7rem;

            p {
                overflow: hidden;

                text-overflow: ellipsis;
                white-space: nowrap;

                margin: 0;
            }
        }
    }

    .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;
            }
        }
    }

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

        gap: 8px;
        font-size: 0.7rem;

        text-transform: uppercase;

        svg, p{
            margin: 0;
        }
    }
}