.button {
	--btn-icon-size: 1em;
	background: var(--bg-btn-inactive);
	color: #ffffff;
	padding: 10px 14px;
	border: none;
	cursor: var(--cursor-interactive);
	display: inline-flex;
	flex-direction: row;
	font-size: 0.9rem;
	font-family: inherit;
	align-items: center;
	gap: 6px;
	user-select: none;
	text-decoration: none;
	line-height: 1.2;
}

.bigIcon {
	--btn-icon-size: 24px;
}

.button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.button.loading {
	cursor: wait;
	animation: shimmer 2.2s linear infinite forwards;
    background-image: linear-gradient(to right, transparent 8%, #ffffffa1 18%, transparent 33%);
    background-size: 1200px 100%;
}

.button:not(:disabled):hover {
	background: var(--bg-btn-inactive-dark);
}

.button > svg {
	--base-transform: scale(1);
	display: block;
	width: var(--btn-icon-size);
	height: var(--btn-icon-size);
	transform: var(--base-transform);
}

.button:not(.bigIcon) > svg {
	--base-transform: scale(1.3);
}

.spinnyIcon > svg {
	animation: spin 1s linear infinite;
}

.accent {
	background: var(--accent);
}

.accent:not(:disabled):hover {
	background: var(--accent-dark);
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }
    100% {
        background-position: 1200px 0;
    }
}

@keyframes spin {
	0% {
		transform: var(--base-transform) rotate(0deg);
	}
	100% {
		transform: var(--base-transform) rotate(360deg);
	}
}