.uni-spinner {

    &--circle {
        display: block;
        border-style: solid;
        border-color: $color-grey-light;
        border-radius: 50%;
        border-top-color: $color-grey-dark;
        animation: spin-circle 1s linear infinite;

        @include circle($label-height);

        &.uni-spinner--primary {
            border-color: $color-primary-light;
            border-top-color: $color-primary;
        }

        &.uni-spinner--warning {
            border-color: $color-warning-light;
            border-top-color: $color-warning;
        }

        &.uni-spinner--error {
            border-color: $color-error-light;
            border-top-color: $color-error;
        }

        &.uni-spinner--light {
            border-color: $alpha-white-medium;
            border-top-color: $alpha-white-light;
        }

        &.uni-spinner--small {
            @include circle($font-regular);
        }

        &.uni-spinner--big {
            @include circle($input-height);
        }
    }

    &--dots {
        display: block;
        border-radius: 50%;
        background: $color-grey-dark;
        animation: spin-dots 1s ease infinite;
        position: relative;


        &:before,
        &:after {
            content: '';
            display: block;
            height: inherit;
            width: inherit;
            position: absolute;
            background: inherit;
            border-radius: inherit;
            animation: spin-dots 1s ease infinite;
        }

        &:before {
            animation-delay: 0.15s;
        }

        &:after {
            animation-delay: 0.3s;
        }

        &.uni-spinner--primary {
            background: $color-primary;
        }

        &.uni-spinner--warning {
            background: $color-warning;
        }

        &.uni-spinner--error {
            background: $color-error;
        }

        &.uni-spinner--light {
            background: $alpha-white-light;
        }

        @include dots($label-height);

        &.uni-spinner--small {
            @include dots($font-regular);
        }

        &.uni-spinner--big {
            @include dots($input-height);
        }
    }
}