$width: 100px;
$height: $width/2;
$amber: #FFC107;
$grey: #ccc;
$time: 0.4s;

@mixin animation($name) {
    @-webkit-keyframes #{$name} {@content;}
    @-moz-keyframes #{$name} {@content;}
    @-o-keyframes #{$name} {@content;}
    @keyframes #{$name} {@content;}
}

@include animation(up) {
    0%, 100% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-30deg);
    }
}

@include animation(down) {
    0%, 100% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(30deg);
    }
}

@include animation(r-to-l) {
    100% {
        margin-left: -1px;
    }
}

@mixin use-animation($name, $time){
    -webkit-animation: $name $time infinite;
    -moz-animation: $name $time infinite;
    -o-animation: $name $time infinite;
    animation: $name $time infinite;
}


[data-focus="spinner"] {
    &[data-spinner="pacman"] {
        .pacman:before, .pacman:after{
            content: '';
            position: absolute;
            background: $amber;
            width: $width;
            height: $height;
            left: 50%;
            top: 50%;
            margin-left: - $width/2;
            margin-top: - $height;
            border-radius: $height $height 0 0;
            @include use-animation(up, $time);
        }
        .pacman:after {
            margin-top: -1px;
            border-radius: 0 0 $height $height;
            @include use-animation(down, $time);
        }
        .dot{
            position: absolute;
            left: 50%;
            top: 50%;
            width: $height/5;
            height: $height/5;
            margin-top: - $height/10;
            margin-left: 30px;
            border-radius: 50%;
            background: $grey;
            z-index: -1;
            box-shadow: 30px 0 0 $grey,
            60px 0 0 $grey,
            90px 0 0 $grey,
            120px 0 0 $grey,
            150px 0 0 $grey;
            @include use-animation(r-to-l, $time);
        }
    }
}