%button {
	align-items: center;
	background: $button-bg;
	border: 1px solid $border-color;
	border-radius: $br;
	color: $text-color;
	display: flex;
	font: inherit;
	justify-content: center;
	min-height: g(1.5);
	min-width: g(1.5);
	padding: calc(g(.25) - 1px);
	text-align: center;
	text-decoration: none;
	user-select: none;
	vertical-align: middle;

	&:not(:disabled) {
		cursor: pointer;

		&:active,
		&:focus,
		&:hover {
			background: $button-hover-bg;
			border-color: $border-color;
			color: $text-color;
		}

		&:active {
			box-shadow: $inset-shadow;
		}

		&:focus-visible {
			z-index: 1;
		}
	}

	&[disabled] {
		opacity: .3;
	}
}

%button-active {
	background: $link-color;
	color: $text-color-inverted;
	z-index: 1;

	&:not(:disabled) {
		&:active,
		&:focus,
		&:hover {
			background: $link-hover-color;
			color: $text-color-inverted;
		}
	}
}

%button-borderless {
	@extend %button;
	background: none;
	border: 1px solid transparent;
	box-shadow: none;
	margin: 0; // Safari fix

	&:not(:disabled) {
		&:active {
			box-shadow: $inset-shadow;
		}
	}
}

%button-small {
	@extend %button;
	font-size: $font-size-small;
	min-height: g(1.3333);
	min-width: g(1.3333);
	padding: 0 g(.75);
}

%button-translucent {
	@extend %button;
	backdrop-filter: $blur;
	background: oklch(from $panel-bg l c h / 38.2%);
	border: 1px solid $border-color;
	box-shadow: none;
	overflow: hidden;

	&:not(:disabled) {
		&:active,
		&:focus,
		&:hover {
			background: oklch(from $panel-bg l c h / 61.8%);
		}

		&:active {
			box-shadow: $inset-shadow;
		}
	}

	&[disabled] {
		opacity: 1;

		> * {
			opacity: .3;
		}
	}

	> * {
		filter: drop-shadow(0 0 .5px $panel-bg);
	}
}