/* Components: Buttons */

@utility btn {
	border-radius: var(--radius-base);

	/* Icon Spacing */
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: --spacing(2);

	/* Typography */
	text-decoration-line: none;
	white-space: nowrap;

	/* Size */
	font-size: var(--text-base);
	line-height: var(--text-base--line-height);
	padding-block: --spacing(1);
	padding-inline: --spacing(4);

	/* Transitions */
	transition-property:
		color,
		background-color,
		border-color,
		outline-color,
		text-decoration-color,
		fill,
		stroke,
		--tw-gradient-from,
		--tw-gradient-via,
		--tw-gradient-to,
		opacity,
		box-shadow,
		transform,
		translate,
		scale,
		rotate,
		filter,
		-webkit-backdrop-filter,
		backdrop-filter,
		display,
		content-visibility,
		overlay,
		pointer-events;
	transition-timing-function: var(--default-transition-timing-function);
	transition-duration: var(--default-transition-duration);

	@variant not-disabled {
		@variant hover {
			filter: brightness(125%);
			@variant dark {
				filter: brightness(75%);
			}
		}
	}
}

@utility btn-icon {
	box-sizing: content-box;
	border-radius: var(--radius-base);

	/* Center Icons */
	display: inline-flex;
	justify-content: center;
	align-items: center;

	/* Typography */
	text-decoration-line: none;
	white-space: nowrap;

	/* Size */
	font-size: var(--text-base);
	width: var(--text-base);
	height: var(--text-base);
	padding: --spacing(2);

	@variant not-disabled {
		@variant hover {
			filter: brightness(125%);
			@variant dark {
				filter: brightness(75%);
			}
		}
	}
}

/* Sizes --- */

/* Button */
@utility btn-sm {
	font-size: var(--text-xs);
	line-height: var(--text-xs--line-height);
	padding-block: --spacing(1);
	padding-inline: --spacing(3);
}
@utility btn-base {
	font-size: var(--text-base);
	line-height: var(--text-base--line-height);
	padding-block: --spacing(1);
	padding-inline: --spacing(4);
}
@utility btn-lg {
	font-size: var(--text-xl);
	line-height: var(--text-xl--line-height);
	padding-block: --spacing(2);
	padding-inline: --spacing(5);
}

/* Button Icon */
@utility btn-icon-sm {
	font-size: var(--text-xs);
	width: var(--text-xs);
	height: var(--text-xs);
	padding: --spacing(1.5);
}
@utility btn-icon-base {
	font-size: var(--text-base);
	width: var(--text-base);
	height: var(--text-base);
	padding: --spacing(2);
}
@utility btn-icon-lg {
	font-size: var(--text-xl);
	width: var(--text-xl);
	height: var(--text-xl);
	padding: --spacing(3);
}

/* Group --- */

@utility btn-group {
	border-radius: var(--radius-container);
	display: inline-flex;
	align-items: center;
	gap: --spacing(2);
	padding: --spacing(2);
	overflow: hidden;
}