@import '~@angular/material/theming';

@mixin os-global-spinner-theme($theme) {
    .spinner-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;

        .spinner-text {
            text-align: center;
            color: white;
            font-size: 1.4rem;
        }

        .spinner-component {
            display: inline-block;
            height: 100px;
            width: 100px;
            border: 6px solid #000;
            border-radius: 100%;
            opacity: 0.2;

            animation: rotation 1s infinite linear;

            &:before {
                position: absolute;
                top: -6px;
                left: -6px;

                content: '';
                display: block;
                height: 100%;
                width: 100%;
                border-radius: 100%;
                border-style: solid;
                border-width: 6px;
                border-color: white transparent transparent;
            }

            @keyframes rotation {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(359deg);
                }
            }
        }
    }
}
