gpc-spinner {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    & svg {
        width: 100%;
        height: 100%;
        animation: spinner 800ms linear infinite;

        &[color="primary"] {
            color: var(--primary-500);

            @media (prefers-color-scheme: dark) {
                color: var(--primary-300);
            }
        }

        &[color="grey"] {
            color: var(--grey-500);

            @media (prefers-color-scheme: dark) {
                color: var(--grey-300);
            }
        }
    }
}
@keyframes spinner {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}