/// Define button colors based on its background
/// @access public
/// @param {Color} $btn-bg [$btn-default-bg] - button background color to tint
/// @deprecated
@mixin btn-colors($btn-bg: $btn-default-bg) {
	box-shadow: 0 (-1 * $btn-box-shadow-width) 0 rgba(0, 0, 0, 0.15) inset;

	&:focus,
	&.focus,
	&:hover {
		background-color: $btn-bg;
		border-color: $btn-bg;
	}

	&:hover {
		opacity: 0.8;
	}

	&:active,
	&.active,
	.open > &.dropdown-toggle {
		&,
		&.focus,
		&:focus,
		&:hover {
			opacity: 1;
			background-color: shade($btn-bg, 12%);
			border-color: shade($btn-bg, 12%);
			box-shadow: none;
		}
	}

	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&.focus {
			opacity: 0.4;
		}
	}
}

/// Define inverse button colors based on the button color
/// @access public
/// @param {Color} $btn-color [$btn-default-bg] - button background color to tint
/// @deprecated
@mixin btn-inverse-colors($btn-color: $btn-default-bg) {
	// we have a border but we cannot use box-sizing: border-box because we don't have a height.
	// so we change the line-height to match 2.1875rem ($btn-line-height) - borders
	$border-width: 0.0937rem;

	&.btn-inverse {
		background-color: transparent;
		color: $btn-color;
		box-shadow: none;
		border: $border-width solid $btn-color;
		line-height: $btn-line-height - (2 * $border-width);
		// this is to avoid background issue in case of an inverse button
		// being in disabled and focused state
		&:disabled,
		&.disabled {
			&:focus,
			&:hover {
				background-color: transparent;
				border: $border-width solid $btn-color;
			}
		}

		&:active,
		&.active,
		.open > &.dropdown-toggle {
			&,
			&.focus,
			&:focus,
			&:hover {
				background-color: transparent;
				color: shade($btn-color, 12%);
				border-color: shade($btn-color, 12%);
			}
		}
	}
}

/// @deprecated
@mixin btn-tertiary-colors($color: $btn-default-bg) {
	&.btn-tertiary {
		background-color: transparent;
		box-shadow: none;
		font-weight: $btn-tertiary-font-weight;
		line-height: $btn-tertiary-line-height;
		min-height: $btn-tertiary-line-height;
		padding: 0 $padding-small;
		transition: background 0.2s ease-in;
		color: $color;

		&:hover,
		&:focus {
			color: $color;
			background: tint($color, 90%);
		}

		&:active {
			background: tint($color, 80%);
		}
	}
}