.fui-button {
	position: relative;
	display: inline-block;

	@apply fui:font-sans;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.015em;
	line-height: 150%;

	@apply fui:rounded-lg;
	border: var(--fui-b-bordersize) solid var(--fui-b-bordercolor);

	appearance: none;
	overflow: clip;
	cursor: pointer;
	/* user-select: none; */

	@apply fui:outline-focus-prepear;
	transition-property: opacity, color, background-color, outline-color, border-color;
	transition-duration: .1s;
	will-change: opacity, color, background-color, outline-color, border-color;

	&.fui-b-disabled,
	&.fui-b-busy {
		pointer-events: none;
	}

	&.fui-b-disabled:not(.fui-b-busy),
	&:disabled:not(.fui-b-busy) {
		cursor: default;
		opacity: 0.5;
	}

	.fui-b-content {
		display: flex;
		gap: 4px;
		align-items: center;
		justify-content: center;
		transition: transform .2s ease;
	}

	.fui-icon {
		height: calc(1em * 1.5);
		vertical-align: text-bottom;
	}
}


/* Designes ************************************/

/* Default */
.fui-button {
	--fui-b-bordersize: 0px;

	color: var(--fui-b-textcolor);
	background-color: var(--fui-b-bgcolor);

	&:hover:not(.fui-b-disabled) {
		background-color: var(--fui-b-bgcolor-active);
		color: var(--fui-b-textcolor-active);
	}

	&:focus-visible {
		background-color: var(--fui-b-bgcolor-active);
		color: var(--fui-b-textcolor-active);
		outline-color: var(--fui-b-outline-color);
	}
}

/* Outline */
.fui-b-design-outline {
	--fui-b-bordersize: 1px;

	color: var(--fui-b-bgcolor);
	background-color: transparent;

	&:hover:not(.fui-b-disabled),
	&:focus-visible {
		border-color: var(--fui-b-bordercolor-active);
	}
}

/* Transparent */
.fui-b-design-transparent {
	color: var(--fui-b-bgcolor);
	background-color: transparent;
}


/* Icon ****************************************/

.fui-button {
	&.fui-b-icon-circle,
	&.fui-b-icon-square {
		--fui-b-spacing-x: var(--fui-b-spacing-y);
		vertical-align: middle;

		.fui-b-content > svg {
			display: block;
		}
	}

	&.fui-b-icon-circle {
		border-radius: 50%;
	}
}


/* Busy ****************************************/

.fui-button .fui-b-busy-indicator {
	position: absolute;
	top: calc((var(--fui-b-height) - var(--fui-b-bheight)) / 2 - var(--fui-b-bordersize));
	left: var(--fui-b-busy-i-left);
	height: var(--fui-b-bheight);
	color: inherit;

	+ .fui-b-content {
		/* Shift the button content when the preloader enabled */
		display: block;
		transform: translate3d(var(--fui-b-busy-c-transform), 0, 0);
	}
}

.loader-fade-enter-active,
.loader-fade-leave-active {
	transition: transform .1s linear, opacity .1s linear;
}

.loader-fade-enter-from,
.loader-fade-leave-to {
	opacity: 0;
	transform: translate3d(-10px, 0, 0);
}

/* Busy icon button */
.fui-b-icon-circle,
.fui-b-icon-square {
	.fui-b-busy-indicator {
		left: calc((var(--fui-b-height) - var(--fui-b-bheight)) / 2 - var(--fui-b-bordersize));
	}

	.fui-b-busy-indicator + .fui-b-content {
		transform: translate3d(var(--fui-b-height), 0, 0);
	}
}


/* Sizes ***************************************/

.fui-button {
	box-sizing: border-box;
	min-height: var(--fui-b-height);
	padding: calc(var(--fui-b-spacing-y) - var(--fui-b-bordersize)) calc(var(--fui-b-spacing-x) - var(--fui-b-bordersize));

	font-size: var(--fui-b-fontsize);

	&.fui-b-icon-circle,
	&.fui-b-icon-square {
		height: var(--fui-b-height);

		.fui-b-content > svg {
			height: calc(var(--fui-b-height) - var(--fui-b-spacing-y) * 2);
		}
	}
}