// @import "../core/core";

$dc-spinner-width: 64px;
$dc-spinner-stroke-width: 4px;

@mixin dc-spinner($spinner-stroke-width: $dc-spinner-stroke-width) {

    display: inline-block;
    margin: -4px 8px 0;
    border-top: $spinner-stroke-width solid rgba($dc-gray30, .3);
    border-right: $spinner-stroke-width solid rgba($dc-gray30, .3);
    border-bottom: $spinner-stroke-width solid rgba($dc-gray30, .3);
    border-left: $spinner-stroke-width solid $dc-gray30;
    vertical-align: middle;
    animation: dc-spinner 1.1s infinite linear;

    &,
    &:after {
        width: $dc-spinner-width;
        height: $dc-spinner-width;
        border-radius: 50%;
    }
}

@mixin dc-spinner-animations {
    @keyframes dc-spinner {

        0% {
            transform: rotate(0deg);
        }

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

@mixin dc-spinner--small {
    &,
    &:after {
        width: $dc-spinner-width / 2;
        height: $dc-spinner-width / 2;
        border-radius: 50%;
    }
}

@mixin dc-spinner--fat {
    border-width: $dc-spinner-stroke-width * 2;
}

@mixin dc-spinner--thin {
    border-width: $dc-spinner-stroke-width / 2;
}

@mixin dc-spinner--error {
    border-top-color: rgba($dc-red20, .3);
    border-right-color: rgba($dc-red20, .3);
    border-bottom-color: rgba($dc-red20, .3);
    border-left-color: $dc-red20;
}

@mixin dc-spinner-selectors {
    @include dc-spinner-animations;

    .dc-spinner {
        @include dc-spinner;

        &--small {
            @include dc-spinner--small;
        }

        &--thin {
            @include dc-spinner--thin;
        }

        &--fat {
            @include dc-spinner--fat;
        }

        &--error {
            @include dc-spinner--error;
        }
    }
}