/**
 * @class Ext.dataview.pullrefresh.Spinner
 */
.#{$prefix}pullrefreshspinner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.#{$prefix}pullrefreshspinner-loading-wrap {
    display: block;
}

.#{$prefix}pullrefreshspinner-main {
    z-index: 10001;
    overflow: hidden;
    opacity: 0;
    padding: 9px;
    transform: scale(1);
    transition: all 0.43s cubic-bezier(.08,.55,.81,1.8);
}

.#{$prefix}pullrefreshspinner-loader-wrapper {
    width:25px;
    height:25px;
}

.#{$prefix}pullrefreshspinner-arrow-wrapper {
    transition: all 0.20s ease;
}

.#{$prefix}pullrefreshspinner-half-circle,
.#{$prefix}pullrefreshspinner-arrow-main {
    position: absolute;
    top: 0;
    border-radius: 999px;
    width: 25px;
    height: 25px;
    @include border(3px, solid, black black transparent);
}

.#{$prefix}pullrefreshspinner-arrow-main {
    margin-top: 10px;
    transform: rotate(-37deg);

    &:before {
        content: '';
        display: block;
        position: relative;
        left: 0px;
        top: 14px;
        border-width: 6px 6px;
        border-style: solid;
        width: 0;
        height: 0;
        transform: rotate(-56deg);
    }
}

.#{$prefix}pullrefreshspinner-spinner-main {
    position: relative;
    width: 25px;
    height: 25px;

    animation: #{$prefix}pullrefreshspinner-sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;

    .#{$prefix}pullrefreshspinner-spinner-left,
    .#{$prefix}pullrefreshspinner-spinner-right {
        position: absolute;
        top: 0;
        overflow: hidden;
        height: 25px;
        width: 13px;


        .#{$prefix}pullrefreshspinner-half-circle {
            animation-iteration-count: infinite;
            animation-duration: 1.3125s;
            animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
        }
    }

    .#{$prefix}pullrefreshspinner-spinner-left {
        left: 0;
        .#{$prefix}pullrefreshspinner-half-circle {
            left: 0;
            border-right-color: transparent;
            animation-name: #{$prefix}pullrefreshspinner-left-wobble;
        }
    }

    .#{$prefix}pullrefreshspinner-spinner-right {
        right: 0;
        .#{$prefix}pullrefreshspinner-half-circle {
            right: 0;
            border-left-color: transparent;
            animation-name: #{$prefix}pullrefreshspinner-right-wobble;
        }
    }
}

.#{$prefix}pullrefreshspinner-spinner-wrapper {
    animation: #{$prefix}pullrefresh-spinner-outer-rotate 2.91667s linear infinite;
}

@keyframes #{$prefix}pullrefreshspinner-outer-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes #{$prefix}pullrefreshspinner-left-wobble {
    0%, 100% {
        transform: rotate(130deg);
    }

    50% {
        transform: rotate(-5deg);
    }
}

@keyframes #{$prefix}pullrefreshspinner-right-wobble {
    0%, 100% {
        transform: rotate(-130deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

@keyframes #{$prefix}pullrefreshspinner-sporadic-rotate {
    12.5% {
        transform: rotate(135deg);
    }

    25% {
        transform: rotate(270deg);
    }

    37.5% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(540deg);
    }

    62.5% {
        transform: rotate(675deg);
    }

    75% {
        transform: rotate(810deg);
    }

    87.5% {
        transform: rotate(945deg);
    }

    100% {
        transform: rotate(1080deg);
    }
}