{% set label_width = '43.011em' %} {# approx 320px #}

<style>
    {#{{ hooks_do_action('call_static_block', 4) }}#}


    body {
        font-family: arial, sans-serif;
        font-size: 16px;
        line-height: 1.5em;
        margin: 0;
        padding: 0;
        color: #000;
    }

    @media print {
        body {
            font-family: arial, sans-serif;
            font-size: 16px;
            line-height: 1.5em;
            margin: 0;
            padding: 0;
            color: #000;
        }
    }

    @page {
        size: auto;   /* auto is the initial value */
        margin: 0;  /* this affects the margin in the printer settings */
    }

    @media screen {
        .prescriptionLabelWrapper {
            margin: 1.5em;
        }
    }

    .prescriptionLabelWrapper {

        font-size: 16px;
        width: calc({{ label_width }} * 0.465);
        height: calc(25.25em * 0.465);

    }

    .prescriptionLabelWrapperMatch {
        transform: scale(0.465);
        transform-origin: top left;
        width: {{ label_width }};
        height: 25.25em;
    }

    .prescriptionLabel {
        transform: scale(1);
        width: 100%;
        height: 100%;
        padding: 0;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 0.8em;
        display: flex;
        flex-direction: column;
    }

    .labelContent {
        padding: 0 1.8em;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    @media print {
        .prescriptionLabel {
            border: none;
        }
    }

    .prescriptionLabel p {
        font-weight: bold;
        text-align: center;
    }


    .mainContent {
        height: 11.6em;
        padding: 0;
        flex: 0 0 11.6em;
        font-size: 0.97em;
        max-height: 11.6em;
    }

    .mainContent .line {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .mainContent .line p {
        font-size: 1.2em;
        line-height: 1.3em;
        white-space: normal;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        position: relative;
        flex: 0 0 auto;
        max-height: 5.6em;

    }

    .mainContent .line.title p {
        font-size: 1.7em;
        line-height: 1.6em;
        margin-bottom: 0.1em;
        text-decoration: underline;
    }


    .mainContent .line.firstLine {
        padding-bottom: 4px;
    }

    .mainContent .line.firstLine p {
        font-size: 1.4em;
        font-weight: normal;
    }

    .mainContent .line.secondLine p {
        font-size: 1.1em;
        line-height: 1.4em;
        font-weight: normal;
    }

    .mainContent .line.thirdLine p {
        font-size: 1.1em;
        line-height: 1.4em;
        font-weight: normal;
    }

    .nameDate {
        display: flex;
        border-top: none;
        padding: 0.3em 0;
    }

    @media print {
        .nameDate {
            border-top: none;
        }
    }

    .nameDate .name {
        width: 50%;
        padding-right: 0.25em;
    }

    .nameDate .name p {
        text-align: left;
    }

    .nameDate .orderRef {
        width: 30%;
    }


    .nameDate .date {
        width: 20%;
        padding-left: 0.25em;
    }

    .nameDate .date p {
        text-align: right;
    }

    .nameDate .date p, .nameDate .name p, .nameDate .orderRef p {
        font-size: 1.5em;
        line-height: 1.2em;
    }


    .prescriptionLabel .header {
        height: 1.5em;
        background: #000;
        background: rgba(0,0,0,0.1);
        border-radius: 0.8em 0.8em 0 0;
        flex: 0 0 1.5em;
    }

    .prescriptionLabel .footer {
        height: 9em;
        background: #000;
        background: rgba(0,0,0,0.1);
        border-radius: 0 0 0.8em 0.8em;
        flex: 0 0 9em;
    }

    @media print {
        .prescriptionLabel .footer, .prescriptionLabel .header {
            background: transparent;
        }
    }


</style>
{% if page_break is not empty %}
    <style>
        .prescriptionLabelWrapper {
            page-break-after: always;
        }
    </style>
{% endif %}
<div class="prescriptionLabelWrapper">
    <div class="prescriptionLabelWrapperMatch">
        <div class="prescriptionLabel">

            <div class="header">

            </div> <!-- .header -->

            <div class="labelContent">

                <div class="mainContent">

                    <div class="line title">
                        <p>
                            {% if item.label_title is not empty %}
                                {{ item.label_title|striptags|raw|trim }}
                            {% else %}
                                {{ item.name }}
                            {% endif %}
                        </p>
                    </div>

                    {% if item.dosage is not empty %}
                        <div class="line labelText firstLine"><p>{{ item.dosage|striptags|raw|trim }}</p></div>
                    {% endif %}

                    {% if item.custom.label_warnings is not empty %}
                        <div class="line labelText secondLine"><p>{{ item.custom.label_warnings|striptags|raw|trim }}</p></div>
                    {% endif %}

                    {% if item.pharmacy_label_text is not empty %}
                        <div class="line labelText thirdLine"><p>{{ item.pharmacy_label_text|striptags|raw|trim }}</p></div>
                    {% endif %}
                </div> <!-- .mainContent -->

                <div class="nameDate">
                    <div class="name">
                        <p>
                            {{ order.address.billing.firstname ~ ' ' ~ order.address.billing.lastname }}
                        </p>
                    </div>
                    <div class="orderRef">

                        {% set order_item = order.items|first %}

                        {% if order_item.id is not empty and order.id is not empty %}
                            <p>{{ order.id }}-{{ order_item.id }}</p>
                        {% endif %}
                    </div> <!-- .orderID -->
                    <div class="date">
                        <p>{{ date('d/m/Y') }}</p>
                    </div>
                </div>

            </div> <!-- .labelContent -->


            <div class="footer">

            </div> <!-- .footer -->
        </div>
    </div>
</div>
