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

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: tokens.$coral-paragraph-m-bold;
	border-radius: tokens.$coral-radius-s;
	height: tokens.$coral-sizing-m;
	padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-m;
	white-space: nowrap;

	&__icon {
		display: inline-flex;
		width: tokens.$coral-sizing-xxxs;
		height: tokens.$coral-sizing-xxxs;
		align-items: center;
	}

	&__caret {
		display: inline-flex;
		align-items: center;
		transition: transform tokens.$coral-transition-fast;
	}

	&__loading {
		display: inline-flex;
		width: tokens.$coral-sizing-xxxs;
		height: tokens.$coral-sizing-xxxs;
		align-items: center;
		color: tokens.$coral-color-accent-icon;

		> svg {
			// Safari fix
			width: tokens.$coral-sizing-xxxs;
			height: tokens.$coral-sizing-xxxs;
		}
	}

	&.size-S {
		height: tokens.$coral-sizing-s;
		padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs;
	}

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

	&[aria-expanded='true'] {
		.button__caret {
			transform: rotate(-180deg);
		}
	}
}

.button.size-S .button__icon {
	display: inline-flex;
	width: tokens.$coral-sizing-minimal;
	height: tokens.$coral-sizing-minimal;
	align-items: center;
}