@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";

.loader {
    &--overlay {
        background-color: $white;
        z-index: 99;
        opacity: 1;
        inset: 0;
        pointer-events: all;

        &.disabled {
            pointer-events: none;
            opacity: 0;

            + {
                .loader {
                    width: 0px;
                    pointer-events: none;
                }
            }
        }
    }

    width: 80px;
    aspect-ratio: 1;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    z-index: 100;
    background: radial-gradient(farthest-side, $primary 94%, #0000) top/10px 10px no-repeat,
    conic-gradient(#0000 30%, $primary);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
    animation: loaderAnimation 8s infinite linear;

}

@keyframes loaderAnimation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(3600deg) 
    }
}