@item_border_radius: 10px;

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

    width: 100%;

    padding: 0 50px;

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

        align-items: center;

        max-height: 200px;
        
        padding: 10px;
        margin-bottom: 20px;

        outline: 1px solid var(--border-color);
        
        background-color: var(--background-color-primary-2);

        border-radius: @item_border_radius;

        cursor: pointer;

        transition: all 0.2s ease-in-out;

        &:hover {
            background-color: var(--background-color-accent);
        }

        &.white_background {
            h1,
            h2,
            span {
                color: var(--text-color-black) !important;
            }
        }

        .livestream_thumbnail {
            width: 15vw;
            height: 10vw;
            max-height: 180px;

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

                border-radius: @item_border_radius;

                object-fit: cover;
            }
        }

        .livestream_info {
            position: relative;

            width: 100%;

            margin-left: 20px;
            font-size: 1rem;

            padding: 10px 0;

            color: var(--text-color);

            h1,
            h2 {
                margin: 0;
                height: fit-content;
                color: var(--text-color);
            }

            .livestream_title {
                margin-top: 10px;
                font-size: 1.5rem;
                height: fit-content;
                font-family: "Space Grotesk", sans-serif;
            }

            .livestream_description {
                font-size: 0.6rem;
                font-weight: 400;
                height: fit-content;
            }

            .livestream_category {
                position: absolute;

                top: 0;
                right: 0;

                padding: 10px;
            }
        }
    }
}