<div class="tabComponent {{section.settings.tab_design}}">
{% if section.settings.section_title != blank %}
<h1 class="infoTitle">{{section.settings.section_title}}</h1>
{% endif %}
<div class="tabContainer">
{% for block in section.blocks %}
<input class="inputTab" name="tabComponent" type="radio" id="tab--{{ forloop.index }}"
{% if forloop.first %} checked="checked"{% endif %}>
<label class="labelTab" for="tab--{{ forloop.index }}" style="background: {{block.settings.label_bg}};">
{% if block.settings.img_icon != blank %}
<img src="{{block.settings.img_icon | img_url: '50x50'}}"
alt="{{block.settings.img_icon.alt}}">
{% endif %}
<h4> {{block.settings.tab_title}}</h4>
</label>
<div class="infoTab">
{% if block.settings.info_title != blank %}
<h1 class="infoTitle">{{block.settings.info_title}}</h1>
{% endif %}
{% if block.settings.info_title != blank %}
<div class="infoDescription">{{block.settings.info_description}}</div>
{% endif %}
<div >{{block.settings.page.content}}</div>
</div>
{% endfor %}
</div>
</div>
<style>
:root {
--tab-bg: {{section.settings.tab_bg}};
--tab-active: {{section.settings.tab_active}};
--tab-hover: {{section.settings.tab_hover}};
--border-color: {{section.settings.border_color}};
}

.tabComponent {
display: flex;
flex-direction: column;
margin: 5%;
box-sizing: border-box;
position: relative;
}

.tabContainer {
display: flex;
flex-wrap: wrap;
}

.inputTab {
position: absolute;
opacity: 0;
background: var(--tab-bg);
}

.labelTab {
width: calc(100% / {{ section.blocks.size}} ) ;
height: clamp(30px, 4vw, 100px);
margin: auto;
padding: .5%;
display: flex;
justify-content: center;
align-items: center;
gap: 2%;
line-height: 1.2;
cursor: pointer;
font-weight: bold;
font-size: clamp(12px, 1.5vw, 24px);
transition: all .3s;
text-align: center;
white-space: nowrap;
overflow: hidden;
}

.labelTab img {
width: clamp(20px, 2.5vw, 50px);
aspect-ratio: 1;
}
.labelTab h4 {
font-size: clamp(14px, 1.5vw, 25px);
margin: auto;
display: inline-block;
vertical-align: top;
}

.infoTab {
display: none;
width: 100%;
padding: 4%;
order: 999;
background: var(--tab-bg);
}

.inputTab:checked + .labelTab + .infoTab {
display: block;
}

.infoTitle {
font-size: clamp(16px, 2vw, 24px);
}

.infoDescription > *{
font-size: clamp(13px, 1.7vw, 20px);
}

/*==== tab design ====*/
.bordered .labelTab {
border-radius: 10px 10px 0 0;
padding: 1%;
}

.bordered .labelTab:hover {
background: var(--tab-hover) !important;
}

.bordered .inputTab:checked + .labelTab {
background: var(--tab-bg) !important;
border-top: solid 2px var(--border-color);
border-left: solid 2px var(--border-color);
border-right: solid 2px var(--border-color);
border-bottom: none;
}
.bordered .infoTab {
background: var(--tab-bg);
border-bottom: solid 2px var(--border-color);
border-left: solid 2px var(--border-color);
border-right: solid 2px var(--border-color);
}

.no-border .labelTab {
border-bottom: solid 2px #e6e6e6;
}

.no-border .labelTab:active {
border-bottom: solid 4px var(--border-color);
background: var(--tab-active) !important;
}
.no-border .labelTab:hover {
background: var(--tab-hover) !important;
}
.no-border .inputTab:checked + .labelTab {
border-bottom: solid 4px var(--border-color);
background: var(--tab-active) !important;
}

@media (min-width: 600px) {
.bordered .labelTab {
border-radius: 10px 10px 0 0;
border-bottom: solid 2px var(--border-color);
}
}

@media (max-width: 600px) {
.labelTab {
display: inline-block;
margin: auto;
width: max-content;
}
.bordered .labelTab {
border-radius: 5px;
}
.inputTab:checked + .labelTab + .infoTab {
border: solid 2px var(--border-color);
}

.bordered .inputTab:checked + .labelTab {
background: var(--tab-bg);
color: var(--border-color);
border: solid 2px var(--border-color);
}
}

</style>
{% schema %}
{
"name": "Tab Component",
"settings": [
{
"type": "text",
"id": "section_title",
"label": "Section Title"
},
{
"type": "select",
"id": "tab_design",
"default": "bordered",
"label": "Tab component design",
"options": [
{
"value": "bordered",
"label": "bordered"
},
{
"value": "no-border",
"label": "no-border"
}
]
},
{
"type": "color",
"id": "tab_bg",
"label": "Section Background",
"default": "#e5e5e5"
},
{
"type": "color",
"id": "tab_hover",
"label": "Tab hover",
"default": "#d8d8d8"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "transparent"
},
{
"type": "color",
"id": "tab_active",
"label": "Tab Active(no-border only)",
"default": "#ccc"
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"settings": [
{
"type": "color",
"id": "label_bg",
"label": "Label background color",
"default": "#fff"
},
{
"type": "image_picker",
"id": "img_icon",
"label": "Image Icon"
},
{
"type": "text",
"id": "tab_title",
"label": "Tab Title"
},
{
"type": "text",
"id": "info_title",
"label": "Info Title"
},
{
"type": "richtext",
"id": "info_description",
"label": "Tab Title",
"default": "<p>Write more info here!</p>"
},
{
"type": "page",
"id": "page",
"label": "Page to show"
}
]
}
],
"max_blocks": 10,
"presets": [
{
"name": "Tab Component"
}
]
}
{% endschema %}