//
// Loading indicator
// --------------------------------------------------

@color-loading-indicator-text: #999999;
@loader-image-path: @image-path;

.loading-indicator {
    padding: 20px 20px 20px 60px;
    color: @color-loading-indicator-text;
    font-size: 14px;
    font-weight: 600;
    background: @body-bg;
    text-align: left;
    z-index: @zindex-loader;

    > span {
        background-image: url('../../images/loader-transparent.svg');
        background-size: 40px 40px;
        background-position: 50% 50%;
        animation: spin 1s linear infinite;
        background-repeat: no-repeat;

        position: absolute;
        width: 40px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        left: 0;
        display: block;
    }

    &.is-transparent {
        background-color: transparent;
    }
}

.loading-indicator-container {
    position: relative;
    min-height: 40px;

    .loading-indicator {
        position: absolute;
        left: -1px;
        right: -1px;
        top: -1px;
        bottom: -1px;
        padding-top: 0;

        > div {
            position: absolute;
            top: 50%;
            margin-top: -0.65em;
        }
    }
}

// For the focus border of buttons
.form-buttons > .loading-indicator-container {
    padding: .3rem;
    margin: -.3rem;
}

.loading-indicator.is-opaque,
.loading-indicator-container.is-opaque .loading-indicator {
    > span {
        background-image: url('../../images/loader.svg');
    }
}

[data-bs-theme="dark"] {
    .loading-indicator.is-opaque,
    .loading-indicator-container.is-opaque .loading-indicator {
        > span {
            background-image: url('../../images/loader-dark.svg');
        }
    }
}

// Sizes

.loading-indicator-container.size-small {
    min-height: 20px;
}

.loading-indicator.size-small,
.loading-indicator-container.size-small .loading-indicator {
    padding: 16px 16px 16px 30px;
    font-size: 11px;
    > span {
        height: 20px;
        width: 20px;
        margin-top: -10px;
    }
}

html.cssanimations {
    .loading-indicator.size-small,
    .loading-indicator-container.size-small .loading-indicator {
        > span {
            background-size: 20px 20px;
        }
    }
}

// Centered

.loading-indicator.indicator-center,
.loading-indicator-container.indicator-center .loading-indicator {
    padding: 20px;

    > span {
        left: 50%;
        margin-left: -20px;
        margin-top: -20px;
    }

    > div {
        text-align: center;
        position: relative;
        margin-top: 30px;
    }
}

// Inset

.loading-indicator.indicator-inset,
.loading-indicator-container.indicator-inset .loading-indicator {
    padding-left: 80px;

    > span {
        left: 20px;
    }
}

// Form fields

.loading-indicator-container.size-form-field,
.loading-indicator-container.size-input-text {
    min-height: 0;
}

.loading-indicator-container.size-form-field .loading-indicator,
.loading-indicator-container.size-input-text .loading-indicator {
    background-color: transparent;
    padding: 0;
    margin: 0;

    > span {
        padding: 0;
        margin: 0;
        left: auto;
        right: 7px;
        top: 6px;
        width: 23px;
        height: 23px;
        background-size: 23px 23px;
    }
}

.loading-indicator-container.size-form-field .loading-indicator > span {
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
}