:root {
    --vue-component-loading-background-color: var(--theme-background-primary, #FFF);
    --vue-component-loading-spinner-background-color: var(--theme-background-primary, #FFF);
    --vue-component-loading-spinner-color: var(--theme-background-brand, #0090CB);
}

.cmp-vue-component.cmp-vue-component--loading {
    min-height: 5rem;
    overflow: hidden;
    position: relative;
}
.cmp-vue-component.cmp-vue-component--loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--vue-component-loading-background-color, #FFF);
    z-index: 100;
}
.cmp-vue-component.cmp-vue-component--loading::after {
    content: '';
    width: 3rem;
    height: 3rem;
    border: 0.3125rem solid var(--vue-component-loading-spinner-background-color, #FFF);
    border-bottom-color: var(--vue-component-loading-spinner-color, #0090CB);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: cmp-vue-component-loading 1s linear infinite;
    position: absolute;
    margin-left: -1.5rem;
    margin-top: -1.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
}

@keyframes cmp-vue-component-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}