@import 'commons';

@include m-infinity-rotation();

$m-loading-speed: 0.7s;

.m-spinner {
    &__wrap {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: wait;
        user-select: none;

        &.m--is-processing {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        &.m--is-processing,
        &.m--is-light,
        &.m--is-lighter {
            .m-spinner {

                &__title,
                &__description {
                    color: $m-color-white;
                }
            }
        }

        &.m--is-light {
            .m-spinner {
                &__icon {
                    border-color: $m-color-active $m-color-white $m-color-white $m-color-white;
                }
            }
        }

        &.m--is-lighter {
            .m-spinner {
                &__icon {
                    border-color: $m-color-white rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.5);
                }
            }
        }

        &.m--is-dark {
            .m-spinner {
                &__icon {
                    border-color: $m-color-active $m-color-grey $m-color-grey $m-color-grey;
                }
            }
        }
    }

    &__title {
        margin: 0;
        @include m-font-size('md');
        font-weight: $m-font-weight-semi-bold;
        white-space: pre-line;

        +.m-spinner__description {
            margin-top: $m-space-2xs;
        }
    }

    &__description {
        margin: 0;
        @include m-font-size('sm');
    }

    &__icon {
        position: relative;
        animation: m-infinity-rotation $m-loading-speed linear infinite;
        width: 46px;
        height: 46px;
        background: none;
        border: $m-border-width-lg solid;
        border-color: $m-color-active $m-color-grey-light $m-color-grey-light $m-color-grey-light;
        border-radius: 50%;

        &.m--is-small {
            width: 16px;
            height: 16px;
            border-width: $m-border-width;
        }

        +.m-spinner__description,
        +.m-spinner__title {
            margin-top: $m-space;
        }
    }
}