.bg-gradient--primary {
    background-color: var(--primary);
    background-image: var(--primary-gradient);
    color: white;
}
.bg-gradient--secondary {
    background-color: var(--secondary);
    background-image: var(--secondary-gradient);
    color: white;
}

.link--undecorated {
    color: inherit;
    text-decoration: none;
}

.monospace {
    font-family: 'Consolas', 'Courier New', Courier, 'Noto Mono', monospace;
}

.disabled,
:disabled,
[disabled],
[disabled="true"] {
    opacity: 0.3;
    pointer-events: none;
}
    .disabled--fake {
        opacity: 0.3;
        pointer-events: all;
        cursor: not-allowed;
    }

.spinner {
	position: relative;
}
	.spinner::after {
		content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><g stroke='currentColor'><circle cx='12' cy='12' r='9.5' fill='none' stroke-linecap='round' stroke-width='0.15em'><animate attributeName='stroke-dasharray' calcMode='spline' dur='1.5s' keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1' keyTimes='0;0.475;0.95;1' repeatCount='indefinite' values='0 150;42 150;42 150;42 150'/><animate attributeName='stroke-dashoffset' calcMode='spline' dur='1.5s' keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1' keyTimes='0;0.475;0.95;1' repeatCount='indefinite' values='0;-16;-59;-59'/></circle><animateTransform attributeName='transform' dur='2s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/></g></svg>");
		vertical-align: middle;
	}