@import "~theme/globals";

@mixin inline() {
    min-height: var(--internal-loading-inline-min-height);
    max-height: 100vh; // In order show it on the page (content will be cut).

    &:not(.core-loading-loaded) {
        position: relative;
        --contents-display: flex;
        flex-direction: column;
    }

    .core-loading-container {
        --loading-background: rgba(var(--loading-background-inline), 0.4);
        flex-direction: row;
        height: auto;
        width: auto;

        .core-loading-message {
            @include margin(0, 0, 0, 10px);
        }
    }
}

:host {
    --loading-background: var(--ion-background-color);
    --loading-background-inline: var(--ion-background-color-rgb);
    --loading-spinner: var(--core-loading-spinner);
    --loading-text-color: var(--ion-text-color);
    --loading-inline-margin: 0px;
    --loading-inline-min-height: 28px;
    --internal-loading-inline-min-height: var(--loading-inline-min-height);
    --loading-display: flex;
    --loading-display-message: block;
    --contents-display: contents;

    @include core-transition(all, 200ms);
    pointer-events: none;
    display: var(--contents-display);

    &.core-loading-loaded {
        position: static;
        pointer-events: auto;
        --internal-loading-inline-min-height: 0px;

        &.has-spacer {
            --contents-display: flex;
            min-height: 100%;
            flex-direction: column;
        }
    }

    .core-loading-container {
        pointer-events: none;
        position: absolute;
        @include position(0, 0, 0, 0);
        height: 100%;
        width: 100%;
        z-index: 3;
        margin: 0;
        padding: 0;
        color: var(--loading-text-color);
        background-color: var(--loading-background);
        @include core-transition(all, 200ms);
        display: var(--loading-display);
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .core-loading-message {
            @include margin(10px, 0, 0, 0);
            display: var(--loading-display-message);
        }

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

    &.core-loading-inline {
       @include inline();
    }
}

// Force inline on some contexts.
:host-context(ion-item),
:host-context(core-block) {
    // Implicit Inline.
    @include inline();
}

:host-context(.limited-width > ):not([slot]) {
    --contents-display: flex;
    flex-direction: column;
    min-height: 100%;
}

// There is a bug on iOs that displays inside elements in wrong order.
// This bug seems not to affect other elements like format-text
:host-context(.ios) {
    --contents-display: flex;
    flex-direction: column;
}