$core-sidetab-size: 60px !default;

ion-app.app-root core-ion-tabs {
    .tabbar {
        z-index: 101; // For some reason, the regular z-index isn't enough with our tabs, use a higher one.

        .core-ion-tabs-loading {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .core-ion-tabs-loading-spinner {
                .spinner circle, .spinner line {
                    stroke: $white;
                }
            }
        }
    }

    .tab-badge.badge {
        background-color: $ion-tabs-badge-color;
    }

    &[tabsplacement="side"] {
        .tabbar {
            @include float(start);
            width: $core-sidetab-size;
            height: 100%;
            flex-direction: column;
            .tab-button {
                width: 100%;
                .tab-badge.badge {
                    @include position(calc(50% - 30px), 2px, null, null);
                }
            }
        }

        .tabcontent {
            width: calc(100% - #{($core-sidetab-size)});
            position: absolute;
            @include position(0, 0, 0, 0);
            core-ion-tab {
                @include position(0, 0, 0, $core-sidetab-size);
                position: relative;
            }
        }
    }
}

ion-app.app-root.ios core-ion-tabs .core-ion-tabs-loading {
    min-height: $tabs-ios-tab-min-height;
}

ion-app.app-root.md core-ion-tabs .core-ion-tabs-loading {
    min-height: $tabs-md-tab-min-height;
}

ion-app.app-root.wp core-ion-tabs .core-ion-tabs-loading {
    min-height: $tabs-wp-tab-min-height;
}

// Copy some styles from ion-tabs and ion-tab.
core-ion-tabs, core-ion-tab {
    @include position(0, null, null, 0);

    position: absolute;
    z-index: $z-index-page-container;
    display: block;

    width: 100%;
    height: 100%;
    overflow: hidden;

    // Do not use "contain: strict" so fullscreen iframes work.
    contain: size layout style;
}

core-ion-tab {
    display: none;
}

core-ion-tab.show-tab {
    display: block;
}

@mixin core-ion-tabs-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) {

    core-ion-tab > .ion-page,
    core-ion-tab > .ion-page > ion-header,
    core-ion-tabs > .ion-page.tab-subpage > ion-header {
        @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);

        // If we should style the title elements in the toolbar
        @if ($style-title) {
            @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
        }
    }

    @media only screen and (max-width: $modal-max-width) {
        .modal-wrapper > .ion-page > ion-header {
            @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);

            // If we should style the title elements in the toolbar
            @if ($style-title) {
                @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
            }
        }
    }

}

ion-app.app-root.ios {
    @include core-ion-tabs-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $cordova-ios-statusbar-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
}

ion-app.app-root.md {
   @include core-ion-tabs-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $cordova-md-statusbar-padding, $cordova-md-statusbar-padding-modal-max-width);
}

ion-app.app-root.wp {
    @include core-ion-tabs-statusbar-padding($toolbar-wp-height, $toolbar-wp-padding, $content-wp-padding, $cordova-wp-statusbar-padding, $cordova-wp-statusbar-padding-modal-max-width);
}