// Loading

// Related variables
$sd-loading-partial-opacity: 0.666;
$sd-loading-button-trans: 0.25s;

// Related mixins
@mixin sd-loading-posmove($move-gap) {
    transform: translateX($move-gap * 2);
}
@mixin sd-loading-negmove($move-gap) {
    transform: translateX(-$move-gap * 2);
}

@mixin sd-loading-dotsize($dot-size) {
    height: $dot-size * 6;
    width: $dot-size * 6;
    &::before,
    &::after {
        height: $dot-size;
        width: $dot-size;
        border-radius: $dot-size * 2;
    }
}

/* Keyframes
================================
*/
@mixin sd-loading-dotmovers($movedist, $name) {
    // Back and forth for dot 1
    @keyframes dot1-#{$name} {
        0% {
            @include sd-loading-negmove($movedist);
        }
        30% {
            z-index: 0;
            opacity: $sd-loading-partial-opacity;
        }
        50% {
            @include sd-loading-posmove($movedist);
            opacity: 1;
        }
        70% {
            z-index: 1;
            opacity: $sd-loading-partial-opacity;
        }
        100% {
            @include sd-loading-negmove($movedist);
        }
    }

    // Back and forth for dot 2
    @keyframes dot2-#{$name} {
        0% {
            @include sd-loading-posmove($movedist);
        }
        30% {
            z-index: 1;
            opacity: $sd-loading-partial-opacity;
        }
        50% {
            @include sd-loading-negmove($movedist);
            opacity: 1;
        }
        70% {
            z-index: 0;
            opacity: $sd-loading-partial-opacity;
        }
        100% {
            @include sd-loading-posmove($movedist);
        }
    }

    // Back and forth for dot 1 white
    // This does not have the opacity change in the middle
    @keyframes dot1-#{$name}-white {
        0% {
            @include sd-loading-negmove($movedist);
        }
        50% {
            @include sd-loading-posmove($movedist);
        }
        100% {
            @include sd-loading-negmove($movedist);
        }
    }

    // Back and forth for dot 2 white
    // This does not have the opacity change in the middle
    @keyframes dot2-#{$name}-white {
        0% {
            @include sd-loading-posmove($movedist);
        }
        50% {
            @include sd-loading-negmove($movedist);
        }
        100% {
            @include sd-loading-posmove($movedist);
        }
    }

    // Back and forth for dot 1 gray
    // This does not have the opacity change in the middle
    @keyframes dot1-#{$name}-gray {
        0% {
            @include sd-loading-negmove($movedist);
        }
        50% {
            @include sd-loading-posmove($movedist);
        }
        100% {
            @include sd-loading-negmove($movedist);
        }
    }

    // Back and forth for dot 2 gray
    // This does not have the opacity change in the middle
    @keyframes dot2-#{$name}-gray {
        0% {
            @include sd-loading-posmove($movedist);
        }
        50% {
            @include sd-loading-negmove($movedist);
        }
        100% {
            @include sd-loading-posmove($movedist);
        }
    }
}

// Rotate the parent
@keyframes sd-loading-rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes sd-loading-animateUpBox {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sd-loading-animateUpBoxOverlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sd-loading-buttonDotsMovement {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 36px;
        opacity: 1;
    }
}

// Styling
%sd-loading-dots {
    position: relative;
    display: inline-block;
    animation: sd-loading-rotate360 2.5s linear infinite;
    transform-origin: 50% 50%;
    &::before,
    &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        content: '';
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.695, 0, 0.305, 1);
    }
    &::before {
        background-color: $lime;
    }
    &::after {
        background-color: $pink;
    }
}

.sd-loadingstate {
    div.sd-box-loading,
    div.sd-pill-loading,
    div.sd-button-loading {
        @extend %sd-loading-dots;
        @include sd-loading-dotsize(6px);
        @include sd-loading-dotmovers(6px, 'small');
        display: inline-block;
        &::before,
        &::after {
            margin-top: -3px;
            margin-left: -3px;
        }
        &::before {
            animation-name: dot1-small;
        }
        &::after {
            animation-name: dot2-small;
        }
    }

    &.mod-loading-white {
        div.sd-button-loading,
        div.sd-box-loading,
        div.sd-pill-loading {
            &::before {
                animation-name: dot1-small-white;
            }
            &::after {
                animation-name: dot2-small-white;
            }
            &::before,
            &::after {
                background-color: $white;
            }
        }
    }

    &.mod-loading-gray {
        div.sd-button-loading,
        div.sd-box-loading,
        div.sd-pill-loading {
            &::before,
            &::after {
                background-color: $gray7;
            }
        }
    }
}

.sd-button-loading-wrapper {
    animation: sd-loading-buttonDotsMovement $sd-loading-button-trans ease-out;
    overflow: hidden;
}
.sd-loading-button.sd-loadingstate {
    display: flex;
    padding-left: 10px;
    transition-duration: $sd-loading-button-trans;
    &.mod-loading-button-inline {
        display: inline-flex;
    }
    .sd-button-loading {
        margin-top: 5px;
        margin-right: 3px;
        overflow: hidden;
    }
}
.sd-loading-box.sd-loadingstate {
    position: relative;
    &::before {
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: '';
        background-color: rgba(255, 255, 255, 0.9);
        animation: sd-loading-animateUpBoxOverlay 333ms ease-out;
    }
    .sd-box-loading {
        width: 36px;
        margin-right: 5px;
        overflow: hidden;
    }
    .sd-loading-box-wrapper {
        position: absolute;
        z-index: 6;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: sd-loading-animateUpBox 500ms ease-out;
        &.mod-box-top {
            top: 40px;
            bottom: auto;
        }
    }
}

.sd-loading-pill.sd-loadingstate {
    position: relative;
    .sd-loading-pill-wrapper {
        position: absolute;
        top: 60px;
        left: 0;
        display: flex;
        width: 100%;
        height: 37px;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        font-size: 14px;
        animation: sd-loading-animateUpBox 500ms ease-out;
    }
    .sd-loading-pill-shape {
        @include sd-elevation(2);
        display: flex;
        width: auto;
        padding: 4px 25px 4px 10px;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        background-color: $white;
    }
    .sd-pill-loading {
        width: 36px;
        margin-right: 5px;
        overflow: hidden;
    }
}