@import '../../styles/variables';

.spinner {
    position: relative;
    text-align: center;
    margin-top: $spacer * $line-height;
    margin-bottom: $spacer / 2;
    line-height: 1.3;

    &:before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-top: -20px;
        margin-left: -10px;
        border-radius: 50%;
        border: 2px solid $brand-purple;
        border-top-color: $brand-violet;
        animation: spinner .6s linear infinite;
    }
}

.spinnerMessage {
    color: $brand-grey-light;
    padding-top: $spacer / 4;
}

.small {
    composes: spinner;
    margin: 0;
    display: inline-block;

    &:before {
        width: $font-size-small;
        height: $font-size-small;
        margin-top: -($font-size-small);
        margin-left: -($font-size-small / 2);
        border-width: .1rem;
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}