%button {
	align-items: center;
	background: $grey-light linear-gradient(to bottom, #fff7, #fff0);
	border-radius: $br;
	border: 0;
	box-shadow: 0 0 0 1px $border-color inset;
	color: inherit;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	padding: g(.25) g(.5);
	text-align: center;
	user-select: none;
	vertical-align: middle;

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

		@include hover {
			background: $grey-light linear-gradient(to bottom, #fff, #fff7);
		}

		&:active {
			box-shadow: $inset-shadow, 0 0 0 1px $border-color inset;
		}

		&:focus-visible {
			outline: 2px solid $base-color-light;
			z-index: 1;
		}
	}

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

%button-active {
	background: $link-color linear-gradient(to bottom, #fff3, #fff0);
	color: $white;
	z-index: 1;

	&:not(:disabled) {
		@include hover {
			background: $link-color linear-gradient(to bottom, #fff1, #0002);
			color: $white;
		}
	}
}

%button-small {
	@extend %button;
	font-size: $font-size-small;
	padding: 0 g(.5);
}