/*
 * Insezo Loader Big
 * --------------------------------------------------
 */
.loader-insezo { /* outer */
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    background: url("../../svg/insezoLogo/logo_ring_outer.svg") no-repeat top left;
    animation: rotation 1s linear infinite;
}

.loader-insezo::after { /* middle */
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    background: url("../../svg/insezoLogo/logo_ring_middle.svg") no-repeat top left;
    animation: backwardsRotation 0.5s linear infinite;
    transform-origin: center center;
}

.loader-insezo::before { /* inner */
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    background: url("../../svg/insezoLogo/logo_ring_inner.svg") no-repeat top left;
    animation: rotation 1.5s linear infinite;
}

/*
 * Insezo Loader Small
 * --------------------------------------------------
 */
.loader-sm-insezo { /* outer */
    width: 36px;
    height: 36px;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    background: url("../../svg/insezoLogo/logo_ring_outer.svg") no-repeat top left;
    animation: rotation 1s linear infinite;
}

.loader-sm-insezo::after { /* middle */
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    background: url("../../svg/insezoLogo/logo_ring_middle.svg") no-repeat top left;
    animation: backwardsRotation 0.5s linear infinite;
    transform-origin: center center;
}

.loader-sm-insezo::before { /* inner */
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    background: url("../../svg/insezoLogo/logo_ring_inner.svg") no-repeat top left;
    animation: rotation 1.5s linear infinite;
}

/*
 * Insezo Button Loader
 * --------------------------------------------------
 */
.btn-loader-insezo { /* outer */
    width: 20px;
    height: 20px;
    display: inline-block;
    flex: 0 0 20px;
    position: relative;
    box-sizing: border-box;
    color: inherit;
    fill: currentColor;
    pointer-events: none;
    vertical-align: middle;
}

.btn-loader-insezo[hidden] {
    display: none !important;
}

.btn-loader-insezo:not(svg) {
    background: url("../../svg/insezoLogo/logo_ring_outer_white.svg") center / contain no-repeat;
    animation: rotation 1s linear infinite;
}

.btn-loader-insezo:not(svg)::after,
.btn-loader-insezo:not(svg)::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    transform-origin: center center;
}

.btn-loader-insezo:not(svg)::after {
    background: url("../../svg/insezoLogo/logo_ring_middle_white.svg") center / contain no-repeat;
    animation: backwardsRotation 0.5s linear infinite;
}

.btn-loader-insezo:not(svg)::before {
    background: url("../../svg/insezoLogo/logo_ring_inner_white.svg") center / contain no-repeat;
    animation: rotation 1.5s linear infinite;
}

.btn-loader-insezo__outer,
.btn-loader-insezo__middle,
.btn-loader-insezo__inner {
    transform-box: view-box;
    transform-origin: center center;
}

.btn-loader-insezo__outer {
    animation: rotation 1s linear infinite;
}

.btn-loader-insezo__middle {
    animation: backwardsRotation 0.5s linear infinite;
}

.btn-loader-insezo__inner {
    animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes backwardsRotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.insezo-spinner {
    position: relative;
    width: 24px;
    height: 24px;

}

.insezo-loader-outer {
    width: 24px;
    height: 24px;
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.insezo-loader-middle {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0;
    top: 0;
    margin: auto;
    animation: backwardsRotation 1.0s linear infinite;
    transform-origin: center center;
}

.insezo-loader-inner {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 24px;
    left: 0;
    top: 0;
    height: 24px;
    margin: auto;
    animation: rotation 1s linear infinite;
}
