/* Variants: soft (light blue pill) and text (no background). Size sm only. */
.button--soft,
.button--text {
	width: 148px;
	padding: 16px 30px;
	border-radius: 1000px;
	color: var(--color-blue);
	font-family: var(--font-base);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.38;
	text-decoration: none;
}

.button--soft:focus-visible,
.button--text:focus-visible {
	outline: 3px solid rgba(0, 106, 200, 0.35);
	outline-offset: 3px;
}

/* Soft */
.button--soft {
	background: var(--color-soft-blue);
	box-shadow: 0 0 0 rgba(0, 106, 200, 0);
}

@media (hover: hover) {
	.button--soft:hover {
		background: #d6eafc;
		box-shadow: 0 4px 10px rgba(0, 106, 200, 0.16);
	}
}

.button--soft:active {
	box-shadow: 0 1px 3px rgba(0, 106, 200, 0.14);
}

/* Text: underline grows from the left under the label */
.button--text {
	background: transparent;
}

.button--text .button__label {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1.5px;
	transition: background-size var(--dur, 320ms) var(--ease-out, ease-out);
}

@media (hover: hover) {
	.button--text:hover {
		color: #0057a8;
	}

	.button--text:hover .button__label {
		background-size: 100% 1.5px;
	}
}

.button--text:focus-visible .button__label {
	background-size: 100% 1.5px;
}

/* Lift and press only when motion is allowed; reduced motion keeps colour changes. */
@media (prefers-reduced-motion: no-preference) {
	html.motion .button--soft:hover {
		transform: translateY(-1px);
	}

	html.motion .button--soft:active,
	html.motion .button--text:active {
		transform: scale(0.97);
		transition-duration: 90ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.button--text .button__label {
		transition: none;
	}
}