@use "../../../bulma/sass/utilities" as bulma-utilities;

$loading-background-legacy: #7f7f7f !default;
$loading-background: rgba(255,255,255,50%) !default;
$loading-icon-size: 3em !default;
$loading-full-page-icon-size: 5em !default;

.loading-overlay {
    @extend %overlay;

    z-index: 29;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &.is-active {
        display: flex
    }

    &.is-full-page {
        position: fixed;
        z-index: 999;

        .loading-icon {
            &::after {
                top: calc(50% - #{$loading-full-page-icon-size * 0.5});
                left: calc(50% - #{$loading-full-page-icon-size * 0.5});
                width: $loading-full-page-icon-size;
                height: $loading-full-page-icon-size;
            }
        }
    }

    .loading-background {
        @extend %overlay;

        background:$loading-background-legacy;
        background:$loading-background;
    }

    .loading-icon {
        position: relative;

        &::after {
            @extend %loader;

            position: absolute;
            top: calc(50% - #{$loading-icon-size * 0.5});
            left: calc(50% - #{$loading-icon-size * 0.5});
            width: $loading-icon-size;
            height: $loading-icon-size;
            border-width: 0.25em;
        }
    }
}