n8n/packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss

@use '../../css/mixins/utils';
@use '../../css/common/var';
@use 'sass:string';

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

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

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

	-webkit-appearance: none;
	text-align: center;
	box-sizing: border-box;
	outline: none;
	margin: 0;
	transition:
		all 0.3s,
		padding 0s,
		width 0s,
		height 0s;

	gap: var(--spacing--3xs);

	@include utils.utils-user-select(none);

	// Solution for a inside button
	& a {
		color: var.$button-font-color string.unquote($important);
	}

	&:hover {
		color: var.$button-hover-font-color string.unquote($important);
		border-color: var.$button-hover-border-color string.unquote($important);
		background-color: var.$button-hover-background-color string.unquote($important);

		& a {
			color: var.$button-hover-font-color string.unquote($important);
		}
	}

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

		& a {
			color: var.$button-active-font-color string.unquote($important);
		}
	}

	&:focus-visible:not(:active, .active) {
		color: var.$button-focus-font-color string.unquote($important);
		border-color: var.$button-focus-border-color string.unquote($important);
		background-color: var.$button-focus-background-color string.unquote($important);
		outline: var.$focus-outline-width solid var.$button-focus-outline-color
			string.unquote($important);

		& a {
			color: var.$button-focus-font-color string.unquote($important);
		}
	}

	&.disabled {
		&,
		&:hover,
		&:active,
		&:focus-visible {
			color: var.$button-disabled-font-color;
			border-color: var.$button-disabled-border-color;
			background-color: var.$button-disabled-background-color;

			& a {
				color: var.$button-disabled-font-color;
			}
		}
	}

	.loading {
		&,
		&:hover,
		&:active,
		&:focus-visible {
			color: var.$button-loading-font-color;
			border-color: var.$button-loading-border-color;
			background-color: var.$button-loading-background-color;

			& a {
				color: var.$button-loading-font-color;
			}
		}
	}

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

	> i {
		display: none;
	}

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

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

	--button--color--text--hover: var(--button--color--text--secondary--hover-active-focus);
	--button--border-color--hover: var(--button--border-color--secondary--hover-active-focus);
	--button--color--background--hover: var(--button--color--background--secondary--hover);

	--button--color--text--active: var(--button--color--text--secondary--hover-active-focus);
	--button--border-color--active: var(--button--border-color--secondary--hover-active-focus);
	--button--color--background--active: var(--button--color--background--secondary--active-focus);

	--button--color--text--focus: var(--button--color--text--secondary--hover-active-focus);
	--button--border-color--focus: var(--button--border-color--secondary--hover-active-focus);
	--button--color--background--focus: var(--button--color--background--secondary--active-focus);
	--button--outline-color--focus: var(--button--outline-color--secondary--focus);

	--button--color--text--disabled: var(--button--color--text--secondary--disabled);
	--button--border-color--disabled: var(--button--border-color--secondary--disabled);
	--button--color--background--disabled: var(--button--color--background--secondary);

	--button--color--text--loading: var(--button--color--text--secondary--loading);
	--button--border-color--loading: var(--button--border-color--secondary--loading);
	--button--color--background--loading: var(--button--color--background--secondary--loading);
}

@mixin n8n-button-highlight {
	--button--color--text: var(--button--color--text--highlight);
	--button--border-color: var(--button--border-color--highlight);
	--button--color--background: var(--button--color--background--highlight);

	--button--color--text--hover: var(--button--color--text--highlight--hover-active-focus);
	--button--border-color--hover: var(--button--border-color--highlight--hover-active-focus);
	--button--color--background--hover: var(--button--color--background--highlight--hover);

	--button--color--text--active: var(--button--color--text--highlight--hover-active-focus);
	--button--border-color--active: var(--button--border-color--highlight--hover-active-focus);
	--button--color--background--active: var(--button--color--background--highlight--active-focus);

	--button--color--text--focus: var(--button--color--text--highlight--hover-active-focus);
	--button--border-color--focus: var(--button--border-color--highlight--hover-active-focus);
	--button--color--background--focus: var(--button--color--background--highlight--active-focus);
	--button--outline-color--focus: var(--button--outline-color--highlight--focus);

	--button--color--text--disabled: var(--button--color--text--highlight--disabled);
	--button--border-color--disabled: var(--button--border-color--highlight--disabled);
	--button--color--background--disabled: var(--button--color--background--highlight--disabled);

	--button--color--text--loading: var(--button--color--text--highlight--loading);
	--button--border-color--loading: var(--button--border-color--highlight--loading);
	--button--color--background--loading: var(--button--color--background--highlight--loading);
}

@mixin n8n-button-highlight-fill {
	--button--color--text: var(--button--color--text--highlight-fill);
	--button--border-color: var(--button--border-color--highlight-fill);
	--button--color--background: var(--button--color--background--highlight-fill);

	--button--color--text--hover: var(--button--color--text--highlight-fill--hover-active-focus);
	--button--border-color--hover: var(--button--border-color--highlight-fill--hover-active-focus);
	--button--color--background--hover: var(--button--color--background--highlight-fill--hover);

	--button--color--text--active: var(--button--color--text--highlight-fill--hover-active-focus);
	--button--border-color--active: var(--button--border-color--highlight-fill--hover-active-focus);
	--button--color--background--active: var(
		--button--color--background--highlight-fill--active-focus
	);

	--button--color--text--focus: var(--button--color--text--highlight-fill--hover-active-focus);
	--button--border-color--focus: var(--button--border-color--highlight-fill--hover-active-focus);
	--button--color--background--focus: var(
		--button--color--background--highlight-fill--active-focus
	);
	--button--outline-color--focus: var(--button--outline-color--highlight-fill--focus);

	--button--color--text--disabled: var(--button--color--text--highlight-fill--disabled);
	--button--border-color--disabled: var(--button--border-color--highlight-fill--disabled);
	--button--color--background--disabled: var(--button--color--background--highlight-fill--disabled);

	--button--color--text--loading: var(--button--color--text--highlight-fill);
	--button--border-color--loading: var(--button--border-color--highlight-fill);
	--button--color--background--loading: var(--button--color--background--highlight-fill);
}

@mixin n8n-button-success {
	--button--color--text: var(--button--color--text--success);
	--button--border-color: var(--color--success);
	--button--color--background: var(--color--success);

	--button--color--text--hover: var(--button--color--text--success);
	--button--border-color--hover: var(--color--success--shade-1);
	--button--color--background--hover: var(--color--success--shade-1);

	--button--color--text--active: var(--button--color--text--success);
	--button--border-color--active: var(--color--success--shade-1);
	--button--color--background--active: var(--color--success--shade-1);

	--button--color--text--focus: var(--button--color--text--success);
	--button--border-color--focus: var(--color--success);
	--button--color--background--focus: var(--color--success);
	--button--outline-color--focus: var(--color--success--tint-1);

	--button--color--text--disabled: var(--button--color--text--success--disabled);
	--button--border-color--disabled: var(--color--success--tint-3);
	--button--color--background--disabled: var(--color--success--tint-3);

	--button--color--text--loading: var(--button--color--text--success);
	--button--border-color--loading: var(--color--success);
	--button--color--background--loading: var(--color--success);
}

@mixin n8n-button-warning {
	--button--color--text: var(--button--color--text--warning);
	--button--border-color: var(--color--warning);
	--button--color--background: var(--color--warning);

	--button--color--text--hover: var(--button--color--text--warning);
	--button--border-color--hover: var(--color--warning--shade-1);
	--button--color--background--hover: var(--color--warning--shade-1);

	--button--color--text--active: var(--button--color--text--warning);
	--button--border-color--active: var(--color--warning--shade-1);
	--button--color--background--active: var(--color--warning--shade-1);

	--button--color--text--focus: var(--button--color--text--warning);
	--button--border-color--focus: var(--color--warning);
	--button--color--background--focus: var(--color--warning);
	--button--outline-color--focus: var(--color--warning--tint-1);

	--button--color--text--disabled: var(--button--color--text--warning--disabled);
	--button--border-color--disabled: var(--color--warning--tint-1);
	--button--color--background--disabled: var(--color--warning--tint-1);

	--button--color--text--loading: var(--button--color--text--warning);
	--button--border-color--loading: var(--color--warning);
	--button--color--background--loading: var(--color--warning);
}

@mixin n8n-button-danger {
	--button--color--text: var(--button--color--text--danger);
	--button--border-color: var(--button--border-color--danger);
	--button--color--background: var(--color--danger);

	--button--color--text--hover: var(--button--color--text--danger);
	--button--border-color--hover: var(--color--danger--shade-1);
	--button--color--background--hover: var(--color--danger--shade-1);

	--button--color--text--active: var(--button--color--text--danger);
	--button--border-color--active: var(--color--danger--shade-1);
	--button--color--background--active: var(--color--danger--shade-1);

	--button--color--text--focus: var(--button--color--text--danger);
	--button--border-color--focus: var(--color--danger);
	--button--color--background--focus: var(--color--danger);
	--button--outline-color--focus: var(--button--outline-color--danger--focus);

	--button--color--text--disabled: var(--button--color--text--danger--disabled);
	--button--border-color--disabled: var(--button--border-color--danger--disabled);
	--button--color--background--disabled: var(--button--color--background--danger--disabled);

	--button--color--text--loading: var(--button--color--text--danger);
	--button--border-color--loading: var(--color--danger);
	--button--color--background--loading: var(--color--danger);
}