@import '../mixins/focus';

$extra-small-height: 16px;
$small-height: 18px;
$medium-height: 20px;
$large-height: 24px;

@mixin button-basics {
	@include focus-with-background-and-color;

	display: inline-block;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	font-weight: normal;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	&:link,
	&:visited,
	&:hover,
	&:active {
		text-decoration: none;
	}
}

@mixin button-color(
	$background-color,
	$border-color: transparent,
	$text-color:
		choose-contrast-color(
			$background-color,
			$aplus-foreground,
			$aplus-background,
		)
) {
	background-color: $background-color;
	color: $text-color;
	border: 1px solid $border-color;
	transition: all 0.3s ease;

	&:link, &:visited {
		color: $text-color;
		$background-color: $background-color;
	}

	&:hover,
	&:active {
		@if $background-color != white {
			color: $text-color;
			background-color: darken($background-color, 10%);
		} @else {
			background-color: $text-color;
			color: $background-color;
		}
	}

	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		cursor: $cursor-disabled;
		opacity: 65%;

		&:hover,
		&:active {
			background-color: $background-color;
			color: $text-color;
		}
	}
}

@mixin button-size($height, $padding-amount: $height / 3) {
	font-size: $height / 1.3;
	padding-top: max($padding-amount, 1px);
	padding-bottom: max($padding-amount, 1px);
	padding-left: max($padding-amount * 1.5, 5px);
	padding-right: max($padding-amount * 1.5, 5px);
	border-radius: $height / 3.5;
	border-width: 1px;
}

.aplus-button {
	&--default {
		@include button-basics;
		@include button-color($aplus-success);
		font-weight: bold;
	}
	&--secondary {
		@include button-basics;
		@include button-color($gray-300, $gray-500);
	}
	&--danger {
		@include button-basics;
		@include button-color($danger, transparent, $aplus-background);
	}
	&--xs {
		@include button-size($extra-small-height, 0px);
	}
	&--sm {
		@include button-size($small-height);
	}
	&--md {
		@include button-size($medium-height);
	}
	&--lg {
		@include button-size($large-height);
	}
	&--left {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	&--right {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-left: none;
	}
}

[data-bs-theme="dark"] {
	.aplus-button {
		&--secondary {
			@include button-color($gray-700, $gray-650);
		}
	}
}
