@import "../common/var";
@mixin button-plain($color) {
	color: $color;
	background: mix($--color-white, $color, 90%);
	border-color: mix($--color-white, $color, 60%);

	&:hover,
	&:focus {
		background: $color;
		border-color: $color;
		color: $--color-white;
	}

	&:active {
		background: mix($--color-black, $color, $--button-active-shade-percent);
		border-color: mix($--color-black, $color, $--button-active-shade-percent);
		color: $--color-white;
		outline: none;
	}

	&.is-disabled {
		&,
		&:hover,
		&:focus,
		&:active {
			color: mix($--color-white, $color, 40%);
			background-color: mix($--color-white, $color, 90%);
			border-color: mix($--color-white, $color, 80%);
		}
	}
}

@mixin button-variant($color, $background-color, $border-color) {
	color: $color;
	background-color: $background-color;
	border-color: $border-color;

	&:hover,
	&:focus {
		background: mix($--color-white, $background-color, $--button-hover-tint-percent);
		border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
		color: $color;
	}
  
	&:active {
		background: mix($--color-black, $background-color, $--button-active-shade-percent);
		border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
		color: $color;
		outline: none;
	}

	&.is-active {
		background: mix($--color-black, $background-color, $--button-active-shade-percent);
		border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
		color: $color;
	}

	&.is-disabled {
		&,
		&:hover,
		&:focus,
		&:active {
			color: $--color-white;
			background-color: mix($background-color, $--color-white);
			border-color: mix($border-color, $--color-white);
		}
	}

	&.is-plain {
		@include button-plain($background-color);
	}
}

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
	padding: $padding-vertical $padding-horizontal;
	font-size: $font-size;
	border-radius: $border-radius;
	&.is-round {
		padding: $padding-vertical $padding-horizontal;
	}
}