//
// Button
// --------------------------------------------------

.btn {
	font: {
		family: inherit;
		size: inherit;
	}
	line-height: inherit;
	color: inherit;
	text-align: center;
	-moz-appearance: none;

	&[disabled],
	&.disabled {
		opacity: $btn-disabled-opacity;
	}
}

.btn-icon {
	.icon {
		svg, img {
			vertical-align: middle;
		}
	}
	span.menu-marker {
		-moz-appearance: none;
		display: inline-block;
		margin-left: 4px;
	}
}

button {
	@media (-moz-platform: macos) {
		// Prevent ugly non-native button styles on macOS
		max-height: 25px;
		margin: 0 -2px -1px;
	}
}

// Zero-priority default margins/paddings for button elements on macOS:

:is(button, toolbarbutton) .button-text {
	@media (-moz-platform: macos) {
		margin-block: 1px 0;
		margin-inline: 3px;
	}
}

radiogroup {
	@media (-moz-platform: macos) {
		margin: 0;
		column-gap: 8px;
	}
}

radio, checkbox {
	@media (-moz-platform: macos) {
		margin: 0;
		margin-inline-start: -2px;
		gap: 6px;
	}
}

radio :is(.radio-check, .radio-check[checked], .radio-icon, .radio-label),
checkbox :is(.checkbox-check, .checkbox-check[checked], .checkbox-icon, .checkbox-label) {
	@media (-moz-platform: macos) {
		margin: 0;
		
		// Can't break this out into a separate rule because of specificity
		&:is(.checkbox-label) {
			margin-top: -1px;
		}
	}
}