////
/// Bootstrap buttons customization
/// @group Buttons
////

@use '@talend/design-tokens/lib/tokens' as tokens;

:root {
	--t-button-padding: 0 #{$padding-normal};
	--t-button-height: #{$btn-line-height - 0.125rem};
}

.btn {
	font-size: $btn-font-size;
	font-weight: $font-weight-semi-bold;
	min-height: var(--t-button-height);
	line-height: var(--t-button-height);
	padding: var(--t-button-padding);
	border: 1px solid;
	box-shadow: none;
	/* stylelint-disable-next-line declaration-property-value-disallowed-list */
	transition: none;

	&,
	&:focus,
	&:hover {
		border-color: transparent;
	}

	&:active,
	.open > &.dropdown-toggle {
		box-shadow: none;
		border-color: transparent;
	}

	&,
	&:active {
		&:focus {
			outline: 2px solid $moody-purple500;
			outline-offset: 1px;
		}
	}

	&.disabled,
	&[disabled],
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&.focus {
			opacity: 0.54;
			cursor: not-allowed;
		}
	}

	&,
	> span {
		display: inline-flex;
		gap: 0.3125rem;
		align-items: center;
		justify-content: center;

		> * {
			flex-shrink: 0;
		}
	}

	svg {
		fill: currentColor;
		height: $svg-md-size;
		width: $svg-md-size;
	}

	&-primary,
	&-success,
	&-info,
	&-warning,
	&--primary {
		background: tokens.$coral-color-accent-background-strong;
		color: tokens.$coral-color-accent-text-weak;

		&:focus,
		&.focus {
			color: tokens.$coral-color-accent-text-weak;
			background-color: tokens.$coral-color-accent-background-strong;
		}

		&:hover {
			background: tokens.$coral-color-accent-background-strong-hover;
			color: tokens.$coral-color-accent-text-weak-hover;
		}

		&:active {
			background: tokens.$coral-color-accent-background-strong-active;
			color: tokens.$coral-color-accent-text-weak-active;
		}

		&.disabled,
		&[disabled],
		&[aria-disabled='true'],
		&[aria-busy='true'] {
			background: tokens.$coral-color-accent-background-strong;
			color: tokens.$coral-color-accent-text-weak;

			&:hover {
				background-color: tokens.$coral-color-accent-background-strong;
			}
		}
	}

	&-inverse {
		background-color: transparent;
		border-color: tokens.$coral-color-accent-border;
		color: tokens.$coral-color-accent-text;

		&:focus,
		&.focus {
			background-color: transparent;
			border-color: tokens.$coral-color-accent-border;
			color: tokens.$coral-color-accent-text;
		}

		&:hover {
			background: tokens.$coral-color-accent-background-weak-hover;
			border-color: tokens.$coral-color-accent-border-hover;
			color: tokens.$coral-color-accent-text-strong-hover;
		}

		&:active {
			background: tokens.$coral-color-accent-background-weak-active;
			color: tokens.$coral-color-accent-text-strong-active;
		}

		&.disabled,
		&[disabled],
		&[aria-disabled='true'],
		&[aria-busy='true'] {
			background: transparent;
			border-color: tokens.$coral-color-accent-border;
			color: tokens.$coral-color-accent-text;

			&:hover {
				background-color: transparent;
			}
		}
	}

	&--secondary {
		background-color: transparent;
		border-color: tokens.$coral-color-accent-border;
		color: tokens.$coral-color-accent-text;

		&:focus,
		&.focus {
			background-color: transparent;
			border-color: tokens.$coral-color-accent-border;
			color: tokens.$coral-color-accent-text;
		}

		&:hover {
			background: tokens.$coral-color-accent-background-weak-hover;
			border-color: tokens.$coral-color-accent-border-hover;
			color: tokens.$coral-color-accent-text-strong-hover;
		}

		&:active {
			background: tokens.$coral-color-accent-background-weak-active;
			color: tokens.$coral-color-accent-text-strong-active;
		}

		&.disabled,
		&[disabled],
		&[aria-disabled='true'],
		&[aria-busy='true'] {
			background: transparent;
			border-color: tokens.$coral-color-accent-border;
			color: tokens.$coral-color-accent-text;

			&:hover {
				background-color: transparent;
			}
		}
	}

	&-tertiary,
	&--tertiary {
		background-color: transparent;
		color: tokens.$coral-color-accent-text;

		&:focus,
		&.focus {
			background-color: transparent;
			color: tokens.$coral-color-accent-text;
		}

		&:hover {
			background: tokens.$coral-color-accent-background-weak-hover;
			color: tokens.$coral-color-accent-text-strong-hover;
		}

		&:active {
			background: tokens.$coral-color-accent-background-weak-active;
			color: tokens.$coral-color-accent-text-strong-active;
		}

		&.disabled,
		&[disabled],
		&[aria-disabled='true'],
		&[aria-busy='true'] {
			background: transparent;
			color: tokens.$coral-color-accent-text;

			&:hover {
				background-color: transparent;
			}
		}
	}

	&-link {
		color: tokens.$coral-color-accent-text;

		&:focus,
		&.focus {
			color: tokens.$coral-color-accent-text;
		}

		&:hover {
			color: tokens.$coral-color-accent-text-strong-hover;
		}

		&:active {
			color: tokens.$coral-color-accent-text-strong-active;
		}

		&.disabled,
		&[disabled],
		&[aria-disabled='true'],
		&[aria-busy='true'] {
			color: tokens.$coral-color-accent-text;

			&:hover {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&.btn-danger,
	&.btn--destructive {
		background: tokens.$coral-color-danger-background-strong;
		border-color: tokens.$coral-color-danger-border;
		color: tokens.$coral-color-danger-text-weak;

		&:focus,
		&.focus {
			background: tokens.$coral-color-danger-background-strong;
			border-color: tokens.$coral-color-danger-border;
			color: tokens.$coral-color-danger-text-weak;
		}

		&:hover {
			background: tokens.$coral-color-danger-background-strong-hover;
			border-color: tokens.$coral-color-danger-border-hover;
			color: tokens.$coral-color-danger-text-weak-hover;
		}

		&:active {
			background: tokens.$coral-color-danger-background-strong-active;
			color: tokens.$coral-color-danger-text-weak-active;
		}

		&[disabled],
		.disabled,
		&[aria-disabled='true'],
		&[aria-busy='true'] {
			background: tokens.$coral-color-danger-background-strong;
			border-color: tokens.$coral-color-danger-border;
			color: tokens.$coral-color-danger-text-weak;

			&:hover {
				background-color: tokens.$coral-color-danger-background-strong;
			}
		}
	}

	&-icon-text {
		--t-button-padding: 0;
	}

	&-xs,
	&-sm {
		--t-button-padding: 0 #{$padding-small-horizontal};
		--t-button-height: 1.75rem - 0.125rem;
	}

	.caret.caret {
		margin-left: $padding-smaller;
	}

	svg + span,
	span + svg {
		margin-left: $padding-smaller;
	}
}