.op3-element[data-op3-element-type="tabsheader"] {
    display: table;
    z-index: 2;
    width: 100%;

    > [data-op3-element-container] {
        width: 100%;
        z-index: 0;

        > [data-op3-children] {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
    }
}

@mixin layout($device) {
    .op3-element[data-op3-element-type="tabsheader"] {
        [data-op3-children] {
            &[data-op3-field-layout-#{$device}="stacked"] {
                flex-direction: column;
                justify-content: initial !important;
            }

            &[data-op3-field-layout-#{$device}="inline"] {
                flex-direction: row;
                align-items: initial !important;
            }
        }
    }
}

@media (min-width: $breakpoint-tablet) {
    @include layout(desktop);
}

@media (max-width: $breakpoint-tablet) and (min-width: $breakpoint-mobile) {
    @include layout(tablet);
}

@media (max-width: $breakpoint-mobile) {
    @include layout(mobile);
}