.#{$prefix}button {
	font-family: var(--button-font-family);
	font-size: var(--button-medium-font-size);
	font-weight: var(--button-font-weight);
	line-height: 100%;
	position: relative;

	z-index: 0;
	display: inline-flex;

	overflow: hidden;
	align-items: center;
	justify-content: center;
	min-height: var(--button-medium-height);

	padding: 0 toRem(18);
	cursor: pointer;

	user-select: none;
	transition: all 0.16s ease-in-out;
	color: hsl(var(--hsl-primary-content));
	border: none;

	border-radius: var(--button-border-radius);
	outline: none;

	background: hsl(var(--hsl-primary));

	> * {
		z-index: 1;
	}

	&:before {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		content: '';
		transition: all 0.16s ease-in-out;
		pointer-events: none;
	}

	&:not(.is-no-focus-ring):focus {
		box-shadow: 0 0 0 0.175rem hsl(var(--hsl-primary) / 0.3);
	}

	&:hover,
	&:focus {
		background: hsl(var(--hsl-primary-active) / 1);
	}

	&.is-loading {
		pointer-events: none;
		color: transparent;

		&:after {
			position: absolute;
			right: 0;
			left: 0;
			width: 1em;
			height: 1em;
			margin: auto;
			content: '';
			animation: ButtonLoadingSpin 0.48s infinite linear;
			border: 2px solid;
			border-top-color: hsl(var(--hsl-primary-content));
			border-right-color: hsl(var(--hsl-primary-content));
			border-radius: 999px;
		}
	}

	&.is-size-small {
		font-size: var(--button-small-font-size);
		min-height: var(--button-small-height);
		padding: 0 toRem(16);
	}

	&.is-size-medium {
		font-size: var(--button-medium-font-size);
		min-height: var(--button-medium-height);
		padding: 0 toRem(18);
	}

	&.is-size-large {
		font-size: var(--button-large-font-size);
		min-height: var(--button-large-height);
		padding: 0 toRem(20);
	}

	&.is-variant-accent {
		color: hsl(var(--hsl-accent-content));
		background: hsl(var(--hsl-accent));

		:not(.is-no-focus-ring):focus {
			box-shadow: 0 0 0 0.175rem hsl(var(--hsl-accent) / 0.3);
		}

		&:hover,
		&:focus {
			background: hsl(var(--hsl-accent-active));
		}

		&.is-loading {
			color: transparent;

			&:after {
				border-top-color: hsl(var(--hsl-accent-content));
				border-right-color: hsl(var(--hsl-accent-content));
			}
		}
	}

	&.is-variant-negative {
		color: hsl(var(--hsl-negative-content));
		background: hsl(var(--hsl-negative));

		:not(.is-no-focus-ring):focus {
			box-shadow: 0 0 0 0.175rem hsl(var(--hsl-negative) / 0.3);
		}

		&:hover,
		&:focus {
			background: hsl(var(--hsl-negative) / 0.85);
		}

		&.is-loading {
			color: transparent;

			&:after {
				border-top-color: hsl(var(--hsl-negative-content));
				border-right-color: hsl(var(--hsl-negative-content));
			}
		}
	}

	&.is-variant-positive {
		color: hsl(var(--hsl-positive-content));
		background: hsl(var(--hsl-positive));

		:not(.is-no-focus-ring):focus {
			box-shadow: 0 0 0 0.175rem hsl(var(--hsl-positive) / 0.3);
		}

		&:hover,
		&:focus {
			background: hsl(var(--hsl-positive) / 0.85);
		}

		&.is-loading {
			color: transparent;

			&:after {
				border-top-color: hsl(var(--hsl-positive-content));
				border-right-color: hsl(var(--hsl-positive-content));
			}
		}
	}

	&.is-variant-secondary {
		color: hsl(var(--hsl-content));
		border: toRem(1) solid hsl(var(--hsl-content) / 0.15);
		background: transparent;

		&:hover {
			border: toRem(1) solid hsl(var(--hsl-content) / 0.2);
			background: hsl(var(--hsl-content) / 0.05);

			&:before {
				background: var(--color-shade-100);
			}
		}

		&:not(.is-no-focus-ring):focus {
			box-shadow: 0 0 0 0.175rem hsl(var(--hsl-primary) / 0.3);
		}

		&.is-loading {
			color: transparent;

			&:after {
				border-top-color: hsl(var(--hsl-primary));
				border-right-color: hsl(var(--hsl-primary));
			}
		}
	}

	&.is-variant-tertiary {
		color: hsl(var(--hsl-content) / 1);
		border: unset;
		background: hsl(var(--hsl-content) / 0.08);

		&:hover {
			background: hsl(var(--hsl-content) / 0.15);
		}

		&:not(.is-no-focus-ring):focus {
			box-shadow: 0 0 0 0.175rem hsl(var(--hsl-primary) / 0.3);
		}

		&.is-loading {
			color: transparent;

			&:after {
				border-top-color: hsl(var(--hsl-content) / 1);
				border-right-color: hsl(var(--hsl-content) / 1);
			}
		}
	}

	&.is-variant-ghost {
		color: hsl(var(--hsl-content) / 1);
		border: unset;
		background: transparent;

		&:not(.is-no-focus-ring):focus {
			box-shadow: 0 0 0 0.175rem hsl(var(--hsl-primary) / 0.3);
		}

		&:hover {
			background: hsl(var(--hsl-content) / 0.05);
		}

		&.is-loading {
			color: transparent;

			&:after {
				border-top-color: hsl(var(--hsl-content) / 1);
				border-right-color: hsl(var(--hsl-content) / 1);
			}
		}
	}

	&[disabled],
	&.is-disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}

	&.is-fluid {
		width: 100%;
	}

	&.is-pill {
		border-radius: 999px;
	}

	&.is-icon-button {
		padding: 0 0;
		aspect-ratio: 1 / 1;
	}

	&.is-icon-left,
	&.is-icon-right {
		display: flex;
		align-items: center;
		gap: toEm(8);
	}

	&.is-icon-left {
		padding-left: toEm(12);
	}

	&.is-icon-right {
		padding-right: toEm(12);
	}
}

@keyframes ButtonLoadingSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}