// (C) 2007-2020 GoodData Corporation
$base_path: $gdc-goodstrap-basepath + "./core/styles/";

.gd-spinner {
    display: inline-block;
    background-image: url($base_path + "images/loading.svg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    animation: loadingSpinner 1s infinite linear;

    &.small {
        width: 16px;
        height: 16px;
    }

    &.large {
        width: 32px;
        height: 32px;
    }
}

@keyframes loadingSpinner {
    $steps: 12;
    $step-duration: 0.5;
    $step-increment-progress: 1 / $steps;
    $step-increment-deg: 360 / $steps;

    0% {
        transform: rotate(0deg) translateZ(-0.1px);
    }

    @for $i from 1 through $steps {
        $animation-start-progress: $i * $step-increment-progress - ($step-duration / 100);
        $animation-end-progress: $animation-start-progress + ($step-duration / 100);
        $start-rotation: ($i - 1) * $step-increment-deg;
        $end-rotation: $i * $step-increment-deg;

        #{percentage($animation-start-progress)} {
            transform: rotate(#{$start-rotation}deg) translateZ(0.1px);
        }

        #{percentage($animation-end-progress)} {
            transform: rotate(#{$end-rotation}deg) translateZ(0);
        }
    }
}
$class-slug: gd-dot-spinner !default;
$spiner-items: 8;
$spinner-item-size: 6px;
$spinner-dimension: 34px;
$spinner-item-background-color: $gd-color-state-blank;

.gd-dot-spinner {
    position: relative;
    width: $spinner-dimension;
    height: $spinner-dimension;

    &-centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    div {
        position: absolute;
        top: 50%;
        width: $spinner-item-size;
        height: $spinner-item-size;
        background: $spinner-item-background-color;
        opacity: 0.3;
        transform: translate(0, -50%) rotate(0);
        border-radius: 50%;
        transform-origin: #{$spinner-dimension / 2} center;
    }

    @for $spinner from 1 through $spiner-items {
        $rotate: (360 / $spiner-items) * $spinner;

        .#{$class-slug}-#{$spinner} {
            transform: translate(0, -50%) rotate(#{$rotate}deg);
            animation: spinner-animation #{($spiner-items * 1) / 15}s #{($spinner) / 15}s infinite;
        }
    }

    @at-root {
        @keyframes spinner-animation {
            0% {
                opacity: 0.2;
            }

            10% {
                opacity: 1;
            }

            100% {
                opacity: 0.2;
            }
        }
    }
}

.loading-placeholder {
    position: relative;
    display: block;
    height: 24px;

    &::before {
        content: "";
        display: inline-block;
        width: 199px;
        height: 14px;
        vertical-align: middle;
        background-image: url($base_path + "./images/loading-placeholder.svg");
        background-repeat: no-repeat;
        background-position: 0 0;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: -100px;
        bottom: 0;
        display: block;
        width: 100px;
        // refactor
        // stylelint-disable-next-line max-line-length
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        animation-name: loading-anim;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
}

.loading-placeholder-2::before {
    width: 240px;
    background-position: 0 -28px;
}

.loading-placeholder-3::before {
    width: 189px;
    background-position: 0 -56px;
}

@keyframes loading-anim {
    from {
        right: -100px;
    }

    to {
        right: calc(100% + 100px);
    }
}