@import "~theme/globals";

:host {
    --loading-background: var(--ion-background-color);
    --loading-spinner: var(--ion-color-primary);
    --loading-text-color: var(--ion-text-color);

    position: static;
    @include core-transition(height, 200ms);
    color: var(--loading-text-color);

    ion-spinner {
        --color: var(--loading-spinner);
        color: var(--color);
    }

    > .core-loading-container {
        position: absolute;
        @include position(0, 0, 0, 0);
        display: table;
        height: 100%;
        width: 100%;
        text-align: center;
        clear: both;
        z-index: 3;
        margin: 0;
        padding: 10px 0 0 0;
        background-color: var(--loading-background);
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;

        .core-loading-spinner {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    }

    .core-loading-content {
        display: contents;
    }

    &.core-loading-noheight .core-loading-content {
        height: auto;
    }

    &.core-loading-loaded {
        position: unset;
    }

    &.core-loading-center {
        display: block;

        .core-loading-container {
            padding-top: 20px;
            position: relative;
        }
    }
}