////
/// dual-ring loading animation
/// @group Component:Loading
/// @author https://github.com/loadingio/css-spinner/
/// license CC-0
////

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

///
.loading {
    display: block;
    width: $loading-size - $loading-ring-width - 2;
    height: $loading-size - $loading-ring-width - 2;
    border-radius: 50%;
    border: $loading-ring-width solid $loading-color;
    border-color: $loading-color transparent $loading-color transparent;
    animation: loading 1.2s linear infinite;

    &.loading-stopped {
        animation-play-state: paused;
        animation-delay: 0.1s;
        transform: rotate(145deg);
    }

    @each $name, $color in $outlined-colors {
        ///
        &#{$outlined-class-name}-#{$name} {
            border-color: $color transparent $color transparent !important;
        }
    }
}

///
.loading.dense {
    width: $loading-size-dense - $loading-ring-width-dense - 2;
    height: $loading-size-dense - $loading-ring-width-dense - 2;
    border-width: $loading-ring-width-dense;
}