.aspire-button-wrapper {
	display: flex;
	width: 100%;
}

.aspire-button-wrapper--full-width .aspire-button {
	width: 100%;
}

.aspire-button {
	--aspire-button-transition: 250ms;
	--aspire-button-icon-transition: 450ms;
	--aspire-button-icon-rotation: 360deg;
	--aspire-button-line-transition: 300ms;
	--aspire-button-circle-color: #f59e0b;
	--aspire-button-circle-opacity: 1;
	--aspire-button-circle-transition: 550ms;
	--aspire-button-circle-easing: cubic-bezier( 0.4, 0, 0.2, 1 );
	--aspire-button-circle-x: 50%;
	--aspire-button-circle-y: 50%;
	--aspire-button-circle-size: 200vmax;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	border: 1px solid transparent;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--aspire-button-transition) ease,
		background-color var(--aspire-button-transition) ease,
		border-color var(--aspire-button-transition) ease,
		border-radius var(--aspire-button-transition) ease,
		box-shadow var(--aspire-button-transition) ease;
}

.aspire-button:hover,
.aspire-button:focus,
.aspire-button:focus-visible {
	color: #fff;
	text-decoration: none;
}

.aspire-button:focus-visible {
	outline: 3px solid rgba( 37, 99, 235, 0.3 );
	outline-offset: 3px;
}

.aspire-button--normal {
	padding: 14px 24px;
	border-radius: 8px;
	background-color: #2563eb;
}

.aspire-button--normal:hover,
.aspire-button--normal:focus-visible {
	background-color: #1d4ed8;
}

.aspire-button--style-01 {
	padding: 14px 24px;
	border-radius: 999px;
	background-color: #111827;
}

.aspire-button--style-01.aspire-button--has-icon.aspire-button--icon-after {
	padding: 7px 8px 7px 22px;
}

.aspire-button--style-01.aspire-button--has-icon.aspire-button--icon-before {
	padding: 7px 22px 7px 8px;
}

.aspire-button--style-01:hover,
.aspire-button--style-01:focus-visible {
	background-color: #1f2937;
}

.aspire-button--size-xs {
	font-size: 12px;
}

.aspire-button--size-sm {
	font-size: 14px;
}

.aspire-button--size-md {
	font-size: 16px;
}

.aspire-button--size-lg {
	font-size: 18px;
}

.aspire-button--size-xl {
	font-size: 20px;
}

.aspire-button__text {
	display: inline-block;
}

.aspire-button--circle-hover {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.aspire-button--circle-hover::before {
	position: absolute;
	top: var(--aspire-button-circle-y);
	left: var(--aspire-button-circle-x);
	z-index: 0;
	width: var(--aspire-button-circle-size);
	height: var(--aspire-button-circle-size);
	border-radius: 50%;
	background-color: var(--aspire-button-circle-color);
	content: "";
	opacity: var(--aspire-button-circle-opacity);
	transform: translate( -50%, -50% ) scale( 0 );
	transition: transform var(--aspire-button-circle-transition) var(--aspire-button-circle-easing);
	pointer-events: none;
}

.aspire-button--circle-hover:hover::before,
.aspire-button--circle-hover:focus-visible::before {
	transform: translate( -50%, -50% ) scale( 1 );
}

.aspire-button--circle-hover .aspire-button__text,
.aspire-button--circle-hover .aspire-button__icon {
	position: relative;
	z-index: 1;
}

.aspire-button--has-hover-line .aspire-button__text {
	position: relative;
}

.aspire-button--has-hover-line .aspire-button__text::after {
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	content: "";
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform var(--aspire-button-line-transition) ease;
	pointer-events: none;
}

.aspire-button--has-hover-line:hover .aspire-button__text::after,
.aspire-button--has-hover-line:focus-visible .aspire-button__text::after {
	transform: scaleX( 1 );
}

.aspire-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
	transform: rotate( 0deg );
	transition:
		color var(--aspire-button-icon-transition) ease,
		background-color var(--aspire-button-icon-transition) ease,
		border-color var(--aspire-button-icon-transition) ease,
		border-radius var(--aspire-button-icon-transition) ease,
		box-shadow var(--aspire-button-icon-transition) ease,
		transform var(--aspire-button-icon-transition) ease;
}

.aspire-button__icon i {
	display: block;
	line-height: 1;
}

.aspire-button__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aspire-button--style-01 .aspire-button__icon {
	width: 42px;
	height: 42px;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	background-color: #fff;
	color: #111827;
}

.aspire-button--style-01:hover .aspire-button__icon,
.aspire-button--style-01:focus-visible .aspire-button__icon {
	border-color: #f59e0b;
	background-color: #f59e0b;
	transform: rotate( var(--aspire-button-icon-rotation) );
}

@media (prefers-reduced-motion: reduce) {
	.aspire-button,
	.aspire-button__icon,
	.aspire-button__text::after,
	.aspire-button--circle-hover::before {
		transition-duration: 0.01ms !important;
	}

	.aspire-button--style-01:hover .aspire-button__icon,
	.aspire-button--style-01:focus-visible .aspire-button__icon {
		transform: none;
	}
}