@import "~theme/globals";

:host {
    position: static;
    @include core-transition(height, 200ms);
    --loading-background: rgba(255, 255, 255, 0.26);

    > .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;
        padding-bottom: 1px; /* This makes height be real */
    }

    &.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;
        }
    }
}

:host-context(body.dark) {
    --loading-background: rgba(0, 0, 0, 0.26);
}