/* We don't want to see the checkboxes. */
.lb-tabs-radio {
    display: none;
}

/* We want the open and closed label to occupy the same place. */
.lb-tabs-label-wrapper {
    display: grid;
    display: -ms-grid;
}
.lb-tabs-label {
    grid-column: 1;
    -ms-grid-column: 1;
    grid-row: 1;
    -ms-grid-row: 1;
    cursor: pointer;
}

/* Toggle the labels, only if we have a closing radio. */
/* We leverage that even if all radios are siblings, matching radios and label wrappers are adjacent. */
.lb-tabs-radio-to-open:checked + .lb-tabs-radio-to-close + .lb-tabs-label-wrapper > .lb-tabs-label-to-open {
    display: none;
}
.lb-tabs-radio-to-open:not(:checked) + .lb-tabs-radio-to-close + .lb-tabs-label-wrapper > .lb-tabs-label-to-close {
    display: none;
}

/* Content is hidden by default. Animate content changes. */
.lb-tabs-content {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transition: opacity 0.6s, visibility 0s linear 0.6s, max-height 0.6s;
}
/* Show selected content. Animate content changes. */
/* Tabs and content are siblings but neither adjacent not exclusive siblings, so we must muscle this out. */
.lb-tabs-radio-to-open-1:checked ~ .lb-tabs-content-1,
.lb-tabs-radio-to-open-2:checked ~ .lb-tabs-content-2,
.lb-tabs-radio-to-open-3:checked ~ .lb-tabs-content-3,
.lb-tabs-radio-to-open-4:checked ~ .lb-tabs-content-4,
.lb-tabs-radio-to-open-5:checked ~ .lb-tabs-content-5,
.lb-tabs-radio-to-open-6:checked ~ .lb-tabs-content-6,
.lb-tabs-radio-to-open-7:checked ~ .lb-tabs-content-7,
.lb-tabs-radio-to-open-8:checked ~ .lb-tabs-content-8,
.lb-tabs-radio-to-open-9:checked ~ .lb-tabs-content-9,
.lb-tabs-radio-to-open-10:checked ~ .lb-tabs-content-10,
.lb-tabs-radio-to-open-11:checked ~ .lb-tabs-content-11,
.lb-tabs-radio-to-open-12:checked ~ .lb-tabs-content-12,
.lb-tabs-radio-to-open-13:checked ~ .lb-tabs-content-13,
.lb-tabs-radio-to-open-14:checked ~ .lb-tabs-content-14,
.lb-tabs-radio-to-open-15:checked ~ .lb-tabs-content-15 {
    opacity: 1;
    visibility: visible;
    max-height: 100vw;
    transition: opacity 0.6s, max-height 0.6s;
}

/* Tabs are known to live besides each other. */
.lb-tabs > nav {
    display: inline-grid;
}

/* In layout builder, show all tabs below each other. */
.layout-builder .lb-tabs-content {
    opacity: 1;
    visibility: visible;
    max-height: 100vw;
}
