.button {
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-normal) var(--ease-out),
		filter var(--duration-normal) var(--ease-out),
		opacity var(--duration-normal) var(--ease-out),
        background var(--duration-normal) var(--ease-out);

	&.variant-primary, &.variant-danger {
        background-image: linear-gradient(180deg, hsla(0,0%,100%,0.12) 0%, transparent 100%);
        box-shadow: inset 0 1px 1px hsla(0,0%,100%,0.2), 0 1px 2px rgba(0,0,0,0.1);
		border-top: 1px solid hsla(0,0%,100%,0.1);

        &:hover:not(:disabled) {
            filter: brightness(1.08);
            box-shadow: inset 0 1px 1px hsla(0,0%,100%,0.2), 0 4px 14px hsla(262, 75%, 48%, 0.35);
        }

        &:active:not(:disabled) {
            transform: scale(0.96);
            filter: brightness(0.95);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
        }
    }

	&:not(.variant-primary):not(.variant-danger) {
		&:hover:not(:disabled) {
			filter: brightness(0.95);
		}

		&:active:not(:disabled) {
			transform: scale(0.96);
			filter: brightness(0.92);
		}
	}

	&:focus-visible {
		outline: none;
		box-shadow: var(--focus-ring);
	}
}

.loading {
	position: relative;
	pointer-events: none;
	opacity: 0.85;
}

.spinner {
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}