@playlist_item_icon_size: 50px;

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

    width: 100%;

    height: 70px;

    gap: 10px;

    padding: 10px;

    border: 1px solid var(--border-color);

    border-radius: 12px;

    cursor: pointer;

    overflow: hidden;

    &.release {
        .playlist_item_icon {
            img {
                border-radius: 50%;
            }
        }
    }

    &.action {
        .playlist_item_icon {
            color: var(--colorPrimary);
        }
    }

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

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

        width: @playlist_item_icon_size;
        height: @playlist_item_icon_size;

        min-width: @playlist_item_icon_size;
        min-height: @playlist_item_icon_size;

        overflow: hidden;

        border-radius: 12px;

        img {
            width: @playlist_item_icon_size;
            height: @playlist_item_icon_size;

            min-width: @playlist_item_icon_size;
            min-height: @playlist_item_icon_size;

            object-fit: cover;
        }

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

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

            width: 100%;
            height: 100%;

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

            svg {
                margin: 0;
                font-size: 2rem;
            }
        }
    }

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

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

        height: 100%;
        width: 90%;

        text-overflow: ellipsis;

        .playlist_item_info_title {
            display: inline;


            font-size: 0.8rem;

            text-overflow: ellipsis;

            h1 {
                font-weight: 700;
                white-space: nowrap;

                overflow: hidden;
            }
        }

        .playlist_item_info_owner {
            display: inline;

            overflow: hidden;

            font-size: 0.7rem;

            h4 {
                font-weight: 400;
            }
        }

        .playlist_item_info_description {
            display: inline-flex;
            flex-direction: row;

            gap: 10px;

            font-size: 0.7rem;

            p {
                font-weight: 500;

                white-space: nowrap;

                overflow: hidden;

                text-transform: uppercase;

                svg {
                    margin-right: 0.4rem;
                }
            }
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        span {
            margin: 0;
        }
    }
}

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

    width: 100%;

    gap: 10px;
}