.g-custom-loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.g-custom-loader {
    --size: 30px;
    --stroke-width: 3px;

    display: block;
    width: var(--size) !important;
    height: var(--size) !important;
    margin: 32px auto;
    animation: rotate 2s linear infinite;
    animation-delay: -1s;
    color: var(--g-color-text-primary);
}

body {
    overflow-y: scroll;
    background-color: var(--g-color-surface-secondary);
    font-size: 16px;
}

.g-custom-loader-circle {
    animation: dash 2s ease-in-out infinite;
    animation-delay: -1s;
    stroke-width: var(--stroke-width);
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    stroke: var(--g-color-text-primary);
}

@keyframes rotate {
    0% {
        transform-origin: 50% 50%;
    }

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15;
    }

    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125;
    }
}

.rgb-filter {
    animation: hue-rotate 12s linear infinite;
}

@keyframes hue-rotate {
    from {
        filter: hue-rotate(0);
    }

    to {
        filter: hue-rotate(1turn);
    }
}