:root.dark-theme {
	.button {
		--btn-col-hover: oklch(from var(--btn-col) calc(l * 0.8) c h);
	}
}

.button {
	--btn-col: var(--col-interactive);
	--btn-col-hover: oklch(from var(--btn-col) calc(l * 0.67) c h);
	--text-col: var(--col-background);
	
	display: grid;
	place-items: center;
	line-height: var(--line-height-sm);
	width: fit-content;
	min-height: var(--interactive-min-height);

	color: var(--text-col);
	background-color: var(--btn-col);
	padding: var(--xs) var(--md);
	border-radius: var(--interactive-border-radius);
	border: 1px solid var(--btn-col);
	cursor: pointer;
	outline: 3px solid transparent;
	transition: var(--transition);
	&:focus-visible,
	&:hover {
		background-color: var(--btn-col-hover);
		border-color: var(--btn-col-hover);
		scale: 107.5%;
	}
	&:focus-visible {
		outline-color: rgb(from var(--btn-col-hover) r g b / 30%);
	}
	@media (width < 800px) {
		padding-inline: var(--sm);
	}
}
.button--danger {
	--btn-col: var(--col-danger);
}
.button--success {
	--btn-col: var(--col-success);
}
.button--gray {
	--text-col: var(--col-text);
	--btn-col: color-mix(in srgb, var(--col-gray), transparent);
	--btn-col-hover: oklch(from var(--btn-col) calc(l * 0.9) c h);
}
.button--sm {
	font-size: var(--text-sm);
	min-height: 0;
	padding: var(--xxs) var(--sm);
}
.button--lg {
	font-size: var(--text-lg);
	padding: var(--sm) var(--lg);
}
.button--inline {
	display: inline-flex;
	padding: unset;
	border: none;
	color: var(--btn-col);
	background-color: transparent;
	min-height: unset;
	&:focus-visible,
	&:hover {
		color: var(--btn-col-hover);
		background-color: color-mix(in srgb, var(--btn-col) 20%, transparent);
		scale: unset;
	}
}
.button--circle {
	padding: unset;
	width: var(--md);
	height: var(--md);
	border-radius: 999rem;
	display: grid;
	place-items: center;
	font-size: var(--text-md);
}