@import '../../css/mixins/utils';
@import '../../css/common/var';

@mixin n8n-button($override: false) {
	$important: if($override, !important, '');

	display: inline-block;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;

	border: var(--border-width-base) $button-border-color var(--border-style-base) unquote($important);
	color: $button-font-color unquote($important);
	background-color: $button-background-color unquote($important);
	font-weight: var(--font-weight-bold) unquote($important);
	border-radius: $button-border-radius unquote($important);
	padding: $button-padding-vertical $button-padding-horizontal unquote($important);
	font-size: $button-font-size unquote($important);

	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition: 0.3s;

	@include utils-user-select(none);

	&:hover {
		color: $button-hover-color unquote($important);
		border-color: $button-hover-border-color unquote($important);
		background-color: $button-hover-background-color unquote($important);
	}

	&:focus {
		border-color: $button-focus-outline-color unquote($important);
		outline: $focus-outline-width solid $button-focus-outline-color unquote($important);
	}

	&:active,
	&.active {
		color: $button-active-color unquote($important);
		border-color: $button-active-border-color unquote($important);
		background-color: $button-active-background-color unquote($important);
		outline: none;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	> i {
		display: none;
	}

	> span {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	span + span {
		margin-left: var(--spacing-3xs);
	}
}

@mixin n8n-button-secondary {
	--button-color: var(--color-primary);
	--button-border-color: var(--color-primary);
	--button-background-color: var(--color-background-xlight);

	--button-active-background-color: var(--color-primary-tint-2);
	--button-active-color: var(--color-primary);
	--button-active-border-color: var(--color-primary);

	--button-hover-background-color: var(--color-primary-tint-3);
	--button-hover-color: var(--color-primary);
	--button-hover-border-color: var(--color-primary);

	--button-focus-outline-color: var(--color-primary-tint-1);
}
