@use '../variables.scss' as var;

@mixin SnFreeze() {
    .SnFreeze-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999999;
        background-color: var(--panel-background-alt);
        opacity: 0.4;
        transition: opacity 0.25s;
        cursor: wait;

        &.is-unfreezing {
            opacity: 0;
        }

        &::after {
            content: attr(data-text);
            display: block;
            max-width: 125px;
            position: absolute;
            top: calc(50% + 12px);
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: sans-serif;
            color: var(--text-color-alt);
            ;
            text-align: center;
            margin-top: 1rem;
        }

        &::before {
            content: "";
            display: block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border-width: 2px;
            border-style: solid;
            border-color: transparent var(--sn-color-1) var(--sn-color-1) var(--sn-color-1);
            position: absolute;
            top: calc(50% - 24px);
            left: calc(50% - 12px);
            will-change: transform;
            animation: spin 0.75s infinite ease-in-out;
        }

        @keyframes spin {
            0% {
                transform: translateZ(0) rotate(0deg);
            }

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