@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> LOADING -> SPINNER
    ========================================================================  */

// Check if the elements with spinner should be imported
@if $import-elements and $import-element-spinner {
    .spinner {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        position: relative;

        // Check if the spinner dial modifier should be declared
        @if $spinner-dial-modifier {
            // Set the keyframe
            @keyframes spinner-dial {
                100% {
                    // Styles
                    transform: rotate(360deg);
                }
            }

            // Modifiers
            &.spinner--dial {
                // Styles
                animation-duration: $spinner-animation-duration;
                animation-iteration-count: infinite;
                animation-name: spinner-dial;
                animation-timing-function: linear;
                border: 2px solid $spinner-color;
                border-radius: 100%;
                display: inline-flex;
                height: $spinner-element-size;
                width: $spinner-element-size;

                // Pseudo elements
                &::before {
                    // Styles
                    animation: none;
                    background-color: $spinner-color;
                    border-radius: 100%;
                    content: '';
                    height: 4px;
                    position: absolute;
                    top: 4px;
                    width: 4px;
                }

                // Cycle through all of the base colors
                @each $color-name, $color-value in $base-colors {
                    // Modifiers: Base colors
                    &.is-#{$color-name} {
                        border-color: base-color($color-name);

                        // Pseudo elements
                        &::before {
                            background-color: base-color($color-name);
                        }
                    }
                }
            }
        }

        // Check if the spinner ring modifier should be declared
        @if $spinner-ring-modifier {
            // Set the keyframe
            @keyframes spinner-ring {
                100% {
                    // Styles
                    transform: rotate(360deg);
                }
            }

            // Modifiers
            &.spinner--ring {
                // Styles
                animation-duration: $spinner-animation-duration;
                animation-iteration-count: infinite;
                animation-name: spinner-ring;
                animation-timing-function: linear;
                border: 5px solid $spinner-color-alt;
                border-radius: 100%;
                display: inline-flex;
                height: $spinner-element-size;
                width: $spinner-element-size;

                // Pseudo elements
                &::before {
                    // Styles
                    animation: none;
                    background: $spinner-color;
                    border-radius: 100%;
                    content: '';
                    height: 5px;
                    position: absolute;
                    top: -5px;
                    width: 5px;
                }

                // Cycle through all of the base colors
                @each $color-name, $color-value in $base-colors {
                    // Modifiers: Base colors
                    &.is-#{$color-name} {
                        border-color: base-color('#{$color-name}-#{$spinner-color-variation}');

                        // Pseudo elements
                        &::before {
                            background-color: base-color($color-name);
                        }
                    }
                }
            }
        }

        // Check if the spinner spiral modifier should be declared
        @if $spinner-spiral-modifier {
            // Set the keyframe
            @keyframes spinner-spiral {
                100% {
                    // Styles
                    transform: rotate(360deg);
                }
            }

            // Modifiers
            &.spinner--spiral,
            &.spinner--spiral-x2,
            &.spinner--spiral-x3 {
                // Styles
                animation-duration: $spinner-animation-duration;
                animation-iteration-count: infinite;
                animation-name: spinner-spiral;
                animation-timing-function: linear;
                border: 1px solid $spinner-color-alt;
                border-radius: 100%;
                border-top-color: $spinner-color;
                display: inline-flex;
                height: $spinner-element-size;
                width: $spinner-element-size;

                // Cycle through all of the base colors
                @each $color-name, $color-value in $base-colors {
                    // Modifiers: Base colors
                    &.is-#{$color-name} {
                        border-color: base-color(#{$color-name}-#{$spinner-color-variation});
                        border-top-color: base-color($color-name);

                        // Pseudo elements
                        &::before,
                        &::after {
                            border-color: base-color(#{$color-name}-#{$spinner-color-variation});
                            border-top-color: base-color($color-name);
                        }
                    }
                }
            }

            &.spinner--spiral {
                // Styles
                border-width: 2px;
            }

            &.spinner--spiral-x2 {
                // Pseudo elements
                &::before {
                    // Styles
                    animation-duration: ($spinner-animation-duration * 3);
                    animation-iteration-count: infinite;
                    animation-name: spinner-spiral;
                    animation-timing-function: linear;
                    border: 1px solid $spinner-color-alt;
                    border-radius: 100%;
                    border-top-color: $spinner-color;
                    content: '';
                    height: ($spinner-element-size - 8px);
                    position: absolute;
                    width: ($spinner-element-size - 8px);
                }
            }

            &.spinner--spiral-x3 {
                // Pseudo elements
                &::before,
                &::after {
                    // Styles
                    animation-iteration-count: infinite;
                    animation-name: spinner-spiral;
                    animation-timing-function: linear;
                    border: 1px solid $spinner-color-alt;
                    border-radius: 100%;
                    border-top-color: $spinner-color;
                    content: '';
                    position: absolute;
                }

                &::before {
                    // Styles
                    animation-duration: ($spinner-animation-duration * 3);
                    height: ($spinner-element-size - 8px);
                    width: ($spinner-element-size - 8px);
                }

                &::after {
                    // Styles
                    animation-duration: ($spinner-animation-duration * 1.5);
                    height: ($spinner-element-size - 16px);
                    width: ($spinner-element-size - 16px);
                }
            }
        }

        // Check if the spinner swoosh modifier should be declared
        @if $spinner-swoosh-modifier {
            // Set the keyframe
            @keyframes spinner-swoosh {
                100% {
                    // Styles
                    transform: rotate(360deg);
                }
            }

            // Modifiers
            &.spinner--swoosh {
                // Styles
                animation-duration: $spinner-animation-duration;
                animation-iteration-count: infinite;
                animation-name: spinner-swoosh;
                animation-timing-function: linear;
                border: 0 solid $spinner-color;
                border-top-width: 2px;
                border-radius: 100%;
                display: inline-flex;
                height: $spinner-element-size;
                width: $spinner-element-size;

                // Cycle through all of the base colors
                @each $color-name, $color-value in $base-colors {
                    // Modifiers: Base colors
                    &.is-#{$color-name} {
                        border-color: base-color($color-name);
                    }
                }
            }
        }

        // Check if the spinner target modifier should be declared
        @if $spinner-target-modifier {
            // Set the keyframe
            @keyframes spinner-target {
                100% {
                    // Styles
                    transform: rotate(1440deg);
                }
            }

            // Modifiers
            &.spinner--target,
            &.spinner--target-x2,
            &.spinner--target-x3 {
                animation-direction: alternate;
                animation-duration: ($spinner-animation-duration * 4);
                animation-iteration-count: infinite;
                animation-name: spinner-target;
                animation-timing-function: ease-in-out;
                border: 1px solid $spinner-color-alt;
                border-bottom-color: $spinner-color;
                border-radius: 100%;
                border-top-color: $spinner-color;
                display: inline-flex;
                height: $spinner-element-size;
                width: $spinner-element-size;

                // Cycle through all of the base colors
                @each $color-name, $color-value in $base-colors {
                    // Modifiers: Base colors
                    &.is-#{$color-name} {
                        border-color: base-color(#{$color-name}-#{$spinner-color-variation});
                        border-bottom-color: base-color($color-name);
                        border-top-color: base-color($color-name);

                        // Pseudo elements
                        &::before,
                        &::after {
                            border-color: base-color(#{$color-name}-#{$spinner-color-variation});
                            border-bottom-color: base-color($color-name);
                            border-top-color: base-color($color-name);
                        }
                    }
                }
            }

            &.spinner--target {
                // Styles
                border-width: 2px;
            }

            &.spinner--target-x2 {
                // Pseudo elements
                &::before {
                    // Styles
                    animation-duration: (($spinner-animation-duration * 4) * 3);
                    animation-iteration-count: infinite;
                    animation-name: spinner-target;
                    animation-timing-function: ease-in-out;
                    border: 1px solid $spinner-color-alt;
                    border-bottom-color: $spinner-color;
                    border-radius: 100%;
                    border-top-color: $spinner-color;
                    content: '';
                    height: ($spinner-element-size - 8px);
                    position: absolute;
                    width: ($spinner-element-size - 8px);
                }
            }

            &.spinner--target-x3 {
                // Pseudo elements
                &::before,
                &::after {
                    // Styles
                    animation-iteration-count: infinite;
                    animation-name: spinner-target;
                    animation-timing-function: ease-in-out;
                    border: 1px solid $spinner-color-alt;
                    border-bottom-color: $spinner-color;
                    border-radius: 100%;
                    border-top-color: $spinner-color;
                    content: '';
                    position: absolute;
                }

                &::before {
                    // Styles
                    animation-duration: (($spinner-animation-duration * 4) * 3);
                    height: ($spinner-element-size - 8px);
                    width: ($spinner-element-size - 8px);
                }

                &::after {
                    // Styles
                    animation-duration: (($spinner-animation-duration * 4) * 1.5);
                    height: ($spinner-element-size - 16px);
                    width: ($spinner-element-size - 16px);
                }
            }
        }
    }
}