<script lang="ts">
    import SiteRefs from "./siteRefs.svelte"

    export let col: Column
    export let rows: Row[]
</script>

<div class="text-container">
    <h3 class:noMargin="{!col.textFieldHeading}">{col.textFieldHeading ?? ""}</h3>
    {#if col?.textContent}
        <div>
            {@html col?.textContent}
        </div>
    {/if}
    {#if col.siteReference}
        <SiteRefs rows="{rows}" />
    {/if}
    <li style="display: none;"></li>
</div>

<style lang="less">
    @import "../../assets/css/variables.less";
    .noMargin {
        margin: 0px !important;
    }
    .text-container {
        text-align: left;
        width: 100%;
        h3 {
            width: 100%;
            font-size: 2rem;
            font-weight: bold;
            margin: 0rem 0vw 1.6rem 0vw;
            color: var(--heading-font-color);
        }
    }
    @media @mobile {
        .text-container {
            li {
                padding-left: 16px !important;
            }
        }
    }
    @media @desktop {
        .text-container {
            margin: 0px;
        }
    }
</style>
