{%- assign el_id = 'global-size-guide' -%}
{%- assign el_class = 'size-guide-popup' -%}
<style>
/* Size Guide popup */
.size-guide-popup .gp-inner {
    width: 90%;
    height: 90%;
    overflow: auto;
}
/* End Size Guide popup */

/* table */
.{{ el_class }} .tbl-wrp {
    overflow-x: auto;
}
.{{ el_class }} .tbl-list {
    width: max-content;
    white-space: nowrap;
    margin: 0 auto;
    min-width: calc(100vw - 30px);
}
.{{ el_class }} .tbl-list tr>th:first-child,
.{{ el_class }} .tbl-list tr>td:first-child {
    position: sticky;
    left: 0;
    white-space: nowrap;
    z-index: 3;
    background: unset;
}
.{{ el_class }} .tbl-list.m-sticky tr>th:first-child,
.{{ el_class }} .tbl-list.m-sticky tr>td:first-child {
    background: var(--dark-beige);
}
.{{ el_class }} .tbl-list th,
.{{ el_class }} .tbl-list td {
    padding: 20px 20px;
    border-bottom: 1px solid var(--light-grey);
    white-space: nowrap;
    vertical-align: middle;
}
.{{ el_class }} .tbl-list tr:last-child td {
    border-bottom: 0;
}
.{{ el_class }} .tbl-list td,
.{{ el_class }} .tbl-list td span {
    transition: .4s;
}
.{{ el_class }} .has-bg {
    background: var(--dark-beige);
}
.{{ el_class }} .w5c {
    width: 5%;
}
.{{ el_class }} .w10c {
    width: 10%;
}
.{{ el_class }} .w15c {
    width: 15%;
}
.{{ el_class }} .w20c {
    width: 20%;
}
.{{ el_class }} .w25c {
    width: 25%;
}
.{{ el_class }} .w30c {
    width: 30%;
}
.{{ el_class }} .w35c {
    width: 35%;
}
.{{ el_class }} .w40c {
    width: 40%;
}
.{{ el_class }} .w45c {
    width: 45%;
}
.{{ el_class }} .w50c {
    width: 50%;
}
.{{ el_class }} .w55c {
    width: 55%;
}
.{{ el_class }} .w60c {
    width: 60%;
}
/* END table */

/* bed icon */
.{{ el_class }} .bed-icon-wrp {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
}
.{{ el_class }} .bed-double {
    background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.5712 1.14282H3.42829C2.16593 1.14282 1.14258 2.16617 1.14258 3.42854V28.5714C1.14258 29.8338 2.16593 30.8571 3.42829 30.8571H28.5712C29.8335 30.8571 30.8569 29.8338 30.8569 28.5714V3.42854C30.8569 2.16617 29.8335 1.14282 28.5712 1.14282Z" stroke="%2359483D"/><path d="M15.9997 7.99997H9.85687C8.20001 7.99997 6.85686 6.65682 6.85686 4.99997V1.14282M15.9997 7.99997H22.1426C23.7994 7.99997 25.1426 6.65682 25.1426 4.99997V1.14282M15.9997 7.99997V1.14282M1.14258 13.7143H30.8569" stroke="%2359483D"/></svg>');
    background-size: cover;
    background-position: center;
    width: 32px;
    height: 32px;
}
.{{ el_class }} .bed-single {
    background-image: url('data:image/svg+xml,<svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.2273 1.22729H2.77273C1.51753 1.22729 0.5 2.24483 0.5 3.50002V28.5C0.5 29.7552 1.51753 30.7727 2.77273 30.7727H23.2273C24.4825 30.7727 25.5 29.7552 25.5 28.5V3.50002C25.5 2.24483 24.4825 1.22729 23.2273 1.22729Z" stroke="%2359483D"/><path d="M18.6818 1.22729V5.04547C18.6818 6.70233 17.3387 8.04548 15.6818 8.04548H10.3182C8.66132 8.04548 7.31818 6.70233 7.31818 5.04548V1.22729M0.5 13.7273H25.5" stroke="%2359483D"/></svg>');
    background-size: cover;
    background-position: center;
    width: 26px;
    height: 32px;
}
/* END bed icon */
/* unit toggle */
.{{ el_class }} .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}
.{{ el_class }} .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.{{ el_class }} .slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    transition: .4s;
    border-radius: 100px;
    border: 1px solid var(--light-grey);
}
.{{ el_class }} .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 0;
    top: 0;
    background-color: var(--brown);
    transition: .4s;
    border-radius: 50%;
}
.{{ el_class }} .switch input:checked + .slider {
    background-color: transparent;
}
.{{ el_class }} .switch input:checked + .slider:before {
    transform: translateX(20px);
}
/* END unit toggle */

@media only screen and (min-width:600px) {
    .{{ el_class }} .tbl-list {
        min-width: calc(100vw - 40px);
    }
    .{{ el_class }} .tbl-list.m-sticky tr>th:first-child,
    .{{ el_class }} .tbl-list.m-sticky tr>td:first-child,
    .{{ el_class }} .tbl-list tr>th:first-child,
    .{{ el_class }} .tbl-list tr>td:first-child {
        background: unset;
    }
    .{{ el_class }} .tbl-list.t-sticky tr>th:first-child,
    .{{ el_class }} .tbl-list.t-sticky tr>td:first-child {
        background: var(--dark-beige);
    }
}
@media only screen and (min-width:1024px) {
    .{{ el_class }} .tbl-list {
        min-width: 800px;
    }
    .{{ el_class }} .tbl-list.m-sticky tr>th:first-child,
    .{{ el_class }} .tbl-list.m-sticky tr>td:first-child,
    .{{ el_class }} .tbl-list.t-sticky tr>th:first-child,
    .{{ el_class }} .tbl-list.t-sticky tr>td:first-child,
    .{{ el_class }} .tbl-list tr>th:first-child,
    .{{ el_class }} .tbl-list tr>td:first-child {
        background: unset;
    }
}
</style>
<div id="{{ el_id }}">
    {% capture sg_popup_content %}
        <h4 class="h6 tl d-tc">{{ settings.product_size_guide_title }}</h4>
        <p class="p3 tl d-tc mt-10">{{ settings.product_size_guide_text }}</p>
        <div class="tbl-wrp relative mt-30 d-mt-40">
            {{ settings.product_size_guide_table }}
        </div>
    {% endcapture %}

    <Teleport to="body">
        {%- render 'global-popup',
            wrapper_class: 'size-guide-popup zi-7',
            vue_close_popup_on_overlay: 'handleClosePopupOverlay($event)',
            show_popup_model: 'showPopup',
            fade_out_model: 'fadeOutPopup',
            vue_close_popup: 'handleClosePopup',
            inner_class: 'bg-cream pt-20 pb-20 pl-20 pr-20 d-pt-30 d-pb-30 d-pl-30 d-pr-30',
            popup_content: sg_popup_content
        -%}							
    </Teleport>
</div>