.k-loading-color, .k-loading-image, .k-loading-mask {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
}

    .k-loading-color *, .k-loading-color ::after, .k-loading-color ::before, .k-loading-color::after, .k-loading-color::before, .k-loading-image *, .k-loading-image ::after, .k-loading-image ::before, .k-loading-image::after, .k-loading-image::before, .k-loading-mask *, .k-loading-mask ::after, .k-loading-mask ::before, .k-loading-mask::after, .k-loading-mask::before {
        box-sizing: border-box;
    }

.k-loading-mask {
    z-index: 100;
}

    .k-loading-mask.k-opaque .k-loading-color {
        opacity: 1;
    }

.k-loading-text {
    text-indent: -4000px;
    text-align: center;
    position: absolute;
    color: $brand-secondary;
}

.k-loading-image {
    background-image: none;
    z-index: 2;
    color: $brand-secondary;
}

.k-loading-color {
    background-color: #fff;
    opacity: .3;
}

.k-i-loading {
    position: relative;
    background-color: transparent;
    box-sizing: border-box;
    color: $brand-secondary;
}

    .k-i-loading::after, .k-i-loading::before {
        box-sizing: border-box;
    }

    .k-i-loading::after, .k-i-loading::before, .k-loading-image::after, .k-loading-image::before {
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-block;
        content: "";
        box-sizing: inherit;
        border-radius: 50%;
        border-width: .05em;
        border-style: solid;
        border-color: $brand-secondary;
        border-top-color: transparent;
        border-bottom-color: transparent;
        background-color: transparent;
    }

.k-icon.k-i-loading::after, .k-icon.k-i-loading::before {
    content: "";
}

.k-i-loading::before, .k-loading-image::before {
    margin-top: -.5em;
    margin-left: -.5em;
    width: 1em;
    height: 1em;
    -webkit-animation: k-loading-animation .7s linear infinite;
    animation: k-loading-animation .7s linear infinite;
}

.k-i-loading::after, .k-loading-image::after {
    margin-top: -.25em;
    margin-left: -.25em;
    width: .5em;
    height: .5em;
    animation: k-loading-animation reverse 1.4s linear infinite;
}

.k-loading-image::after, .k-loading-image::before {
    content: "";
    border-width: 1px;
    border-width: clamp(.015em,1px,1px);
    font-size: 4em;
}


@keyframes loading {
    0% {
        stroke-dasharray: 0 251;
        stroke-dashoffset: 502;
    }

    50% {
        stroke-dasharray: 250 1;
    }

    100% {
        stroke-dasharray: 0 251;
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes loading {
    0% {
        stroke-dasharray: 0 251;
        stroke-dashoffset: 502;
    }

    50% {
        stroke-dasharray: 250 1;
    }

    100% {
        stroke-dasharray: 0 251;
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes k-loading-animation {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes k-loading-animation {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}