//
// Spinner progress
//
// Displays clock layout spinner rotating clockwise.
// For setting bubble color, set own class to element and set background color for sub element.
//
// Example HTML:
//   <div class="spinner-progress"><div>Loading…</div></div>
//

//
// Animations
//
@keyframes spinner-progress-spin {
    to { transform: rotate(1turn); }
}

//
// mixin
//
@mixin spinner-progress($color: rgb(0, 0, 0), $size: 1em) {
    position: relative;
    display: inline-block;
    width: 5em;
    height: 5em;
    margin: 0 .5em;
    text-indent: 999em;
    overflow: hidden;
    font-size: $size;
    animation: spinner-progress-spin 1s infinite steps(8);

    &:before,
    &:after,
    & > div:before,
    & > div:after {
        content: '';
        position: absolute;
        top: 0;
        left: 2.25em; // (container width - part width)/2
        width: .5em;
        height: 1.5em;
        border-radius: .2em;
        background-color: rgba($color, 0.2);
        box-shadow: 0 3.5em rgba($color, 0.2); // container height - part height
        transform-origin: 50% 2.5em; // container height / 2
    }

    &:before {
        background-color: rgba($color, 1);
    }

    &:after {
        transform: rotate(-45deg);
        background-color: rgba($color, 0.8);
    }

    & > div {
        &:before {
            transform: rotate(-90deg);
            background-color: rgba($color, 0.6);
        }

        &:after {
            transform: rotate(-135deg);
            background-color: rgba($color, 0.4);
        }
    }
}

//
// Spinner
//
.spinner-progress {
    @include spinner-progress($spinner--color);
}