@use '../core/styles/common/tokens' as *;

@use './loader-overlay-theme' as *;

.kbq-loader-overlay_parent {
    position: relative;
}

.kbq-loader-overlay-text,
.kbq-loader-overlay-caption {
    max-width: 90%;

    text-align: center;
}

.kbq-loader-overlay {
    --padding-horizontal: var(--kbq-size-3xl);
    --loader-margin-bottom: var(--kbq-size-xxl);
    --content-gap-vertical: var(--kbq-size-l);

    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;

    // todo
    z-index: 10;

    .kbq-loader-overlay__container {
        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;

        width: 80%;
        max-width: 80%;
    }

    padding-left: var(--padding-horizontal);
    padding-right: var(--padding-horizontal);

    .kbq-progress-spinner:has(+ .kbq-loader-overlay-text, + .kbq-loader-overlay-caption) {
        margin-bottom: var(--loader-margin-bottom);
    }

    .kbq-loader-overlay-text {
        margin-bottom: var(--content-gap-vertical);
    }

    &.kbq-loader-overlay_big {
        --padding-horizontal: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
        --loader-margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
        --content-gap-vertical: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
    }

    &.kbq-loader-overlay_normal {
        --padding-horizontal: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
        --loader-margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
        --content-gap-vertical: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
    }

    &.kbq-loader-overlay_compact {
        --padding-horizontal: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
        --loader-margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
        --content-gap-vertical: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
    }
}

@include kbq-loader-overlay-theme();
@include kbq-loader-overlay-typography();