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

/* 3XS */
.fui-b-size-3xs {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 2);
	--fui-b-spacing-y: 1px;
	--fui-b-fontsize: var(--fui-text-xs);
	--fui-b-height: 20px;
	--fui-b-bheight: 10px;

	--fui-b-busy-i-left: 3px;
	--fui-b-busy-c-transform: calc(var(--fui-spacing) * 2);

	@apply fui:rounded-md;

	&.fui-b-icon-circle,
	&.fui-b-icon-square {
		--fui-b-bheight: 14px;
		--fui-b-spacing-y: 2px;
	}
}

/* 2XS */
.fui-b-size-2xs {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 2.5);
	--fui-b-spacing-y: var(--fui-spacing);
	--fui-b-fontsize: var(--fui-text-xs);
	--fui-b-height: 28px;
	--fui-b-bheight: 14px;

	--fui-b-busy-i-left: 3px;
	--fui-b-busy-c-transform: 10px;

	@apply fui:rounded-md;

	&.fui-b-icon-circle,
	&.fui-b-icon-square {
		--fui-b-spacing-y: 6px;
		--fui-b-bheight: 16px;
	}
}

/* XS */
.fui-b-size-xs {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 3);
	--fui-b-spacing-y: calc(var(--fui-spacing) * 2);
	--fui-b-fontsize: var(--fui-text-xs);
	--fui-b-height: 34px;
	--fui-b-bheight: 14px;

	--fui-b-busy-i-left: 4px;
	--fui-b-busy-c-transform: 10px;

	&.fui-b-icon-circle,
	&.fui-b-icon-square {
		--fui-b-bheight: 20px;
		--fui-b-spacing-y: 7.5px;
	}
}

/* S */
.fui-b-size-s {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 3);
	--fui-b-spacing-y: calc(var(--fui-spacing) * 2);
	--fui-b-fontsize: var(--fui-text-sm);
	--fui-b-height: 37px;
	--fui-b-bheight: 14px;

	--fui-b-busy-i-left: 4px;
	--fui-b-busy-c-transform: 10px;

	&.fui-b-icon-circle,
	&.fui-b-icon-square {
		--fui-b-bheight: 22px;
		--fui-b-spacing-y: 7.5px;
	}
}

/* M */
.fui-b-size-m {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 5);
	--fui-b-spacing-y: calc(var(--fui-spacing) * 2.5);
	--fui-b-fontsize: var(--fui-text-sm);
	--fui-b-height: 42px;
	--fui-b-bheight: 22px;

	--fui-b-busy-i-left: 8px;
	--fui-b-busy-c-transform: 17px;
}

/* L */
.fui-b-size-l {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 5);
	--fui-b-spacing-y: calc(var(--fui-spacing) * 3);
	--fui-b-fontsize: var(--fui-text-sm);
	--fui-b-height: 48px;
	--fui-b-bheight: 22px;

	--fui-b-busy-i-left: 8px;
	--fui-b-busy-c-transform: 17px;
}

/* XL */
.fui-b-size-xl {
	--fui-b-spacing-x: calc(var(--fui-spacing) * 6);
	--fui-b-spacing-y: calc(var(--fui-spacing) * 3.5);
	--fui-b-fontsize: var(--fui-text-base);
	--fui-b-height: 52px;
	--fui-b-bheight: 26px;

	--fui-b-busy-i-left: 10px;
	--fui-b-busy-c-transform: 20px;
}

/* Colors **************************************/

.fui-b-color-primary {
	--fui-b-textcolor: var(--fui-color-white);
	--fui-b-textcolor-active: var(--fui-b-textcolor);
	--fui-b-bgcolor: var(--fui-color-primary-700);
	--fui-b-bgcolor-active: var(--fui-color-primary-800);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: var(--fui-color-focus);
}

.fui-b-color-green {
	--fui-b-textcolor: var(--fui-color-white);
	--fui-b-textcolor-active: var(--fui-b-textcolor);
	--fui-b-bgcolor: var(--fui-color-green-700);
	--fui-b-bgcolor-active: var(--fui-color-green-800);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-green-200),
		var(--fui-color-green-900)
	);
}

.fui-b-color-red {
	--fui-b-textcolor: var(--fui-color-white);
	--fui-b-textcolor-active: var(--fui-b-textcolor);
	--fui-b-bgcolor: var(--fui-color-red-700);
	--fui-b-bgcolor-active: var(--fui-color-red-800);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-red-200),
		var(--fui-color-red-900)
	);
}

.fui-b-color-blue {
	--fui-b-textcolor: var(--fui-color-white);
	--fui-b-textcolor-active: var(--fui-b-textcolor);
	--fui-b-bgcolor: var(--fui-color-blue-700);
	--fui-b-bgcolor-active: var(--fui-color-blue-800);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-blue-200),
		var(--fui-color-blue-900)
	);
}

.fui-b-color-white {
	--fui-b-textcolor: var(--fui-color-gray-900);
	--fui-b-textcolor-active: var(--fui-color-primary-700);
	--fui-b-bgcolor: var(--fui-color-gray-200);
	--fui-b-bgcolor-active: var(--fui-color-gray-100);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-600)
	);

	&:not(.fui-b-design-transparent),
	&:hover:not(.fui-b-disabled),
	&:focus-visible {
		--fui-b-bordersize: 1px;
	}

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		color: light-dark(var(--fui-b-textcolor), var(--fui-b-bgcolor));
	}

	&:hover:not(.fui-b-disabled),
	&:focus-visible {
		/* change color for hover and focus */
		border-color: var(--fui-b-bordercolor);
		color: var(--fui-b-textcolor-active);
	}
}

.fui-b-color-gray-100 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-800)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-200),
		var(--fui-color-gray-700)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-800)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		color: var(--fui-b-textcolor);
	}
}

.fui-b-color-gray-200 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-200),
		var(--fui-color-gray-700)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-300),
		var(--fui-color-gray-600)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-800)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		color: var(--fui-b-textcolor);
	}
}

.fui-b-color-gray-300 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-300),
		var(--fui-color-gray-600)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-400),
		var(--fui-color-gray-500)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-800)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		color: var(--fui-b-textcolor);
	}
}

.fui-b-color-gray-400 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-400),
		var(--fui-color-gray-500)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-500),
		var(--fui-color-gray-400)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-800)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		color: var(--fui-b-textcolor);
	}
}

.fui-b-color-gray-500 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-white)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-500),
		var(--fui-color-gray-400)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-600),
		var(--fui-color-gray-300)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-100),
		var(--fui-color-gray-800)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		color: var(--fui-b-textcolor);

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

.fui-b-color-gray-600 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-600),
		var(--fui-color-gray-300)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-800),
		var(--fui-color-gray-400)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-200),
		var(--fui-color-gray-700)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		--fui-b-bgcolor: light-dark(
			var(--fui-color-gray-900),
			var(--fui-color-white)
		);
	}
}

.fui-b-color-gray-700 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-700),
		var(--fui-color-gray-200)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-gray-400)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-200),
		var(--fui-color-gray-700)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		--fui-b-bgcolor: light-dark(
			var(--fui-color-gray-900),
			var(--fui-color-white)
		);
	}
}

.fui-b-color-gray-800 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-800),
		var(--fui-color-gray-100)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-600),
		var(--fui-color-gray-400)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-200),
		var(--fui-color-gray-700)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		--fui-b-bgcolor: light-dark(
			var(--fui-color-gray-900),
			var(--fui-color-white)
		);
	}
}

.fui-b-color-gray-900 {
	--fui-b-textcolor: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-textcolor-active: light-dark(
		var(--fui-color-white),
		var(--fui-color-gray-900)
	);
	--fui-b-bgcolor: light-dark(
		var(--fui-color-gray-900),
		var(--fui-color-gray-50)
	);
	--fui-b-bgcolor-active: light-dark(
		var(--fui-color-gray-700),
		var(--fui-color-gray-400)
	);

	--fui-b-bordercolor: var(--fui-b-bgcolor);
	--fui-b-bordercolor-active: var(--fui-b-bgcolor-active);

	--fui-b-outline-color: light-dark(
		var(--fui-color-gray-200),
		var(--fui-color-gray-700)
	);

	&.fui-b-design-transparent,
	&.fui-b-design-outline {
		/* change color for neutral state */
		--fui-b-bgcolor: light-dark(
			var(--fui-color-gray-900),
			var(--fui-color-white)
		);
	}
}