/**
 * AS Button component
 */

.as-button {
	align-items: center;
	background-color: var(--as-btn-primary-bg);
	border: none;
	border-radius: var(--as-btn-radius);
	box-sizing: border-box;
	color: var(--as-btn-primary-text);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--as-btn-font-size);
	font-weight: var(--as-btn-font-weight);
	justify-content: center;
	letter-spacing: var(--as-btn-letter-spacing);
	line-height: var(--as-btn-line-height);
	min-width: var(--as-btn-min-width);
	padding: var(--as-btn-padding-y) var(--as-btn-padding-x);
	text-align: center;
	text-decoration: none;
	transition: var(--as-btn-transition);
	vertical-align: middle;
	width: fit-content;
	-webkit-font-smoothing: antialiased;
}

.as-button__inner {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
}

.as-button__text {
	white-space: nowrap;
}

.as-button--primary {
	background-color: var(--as-btn-primary-bg);
	color: var(--as-btn-primary-text);
}

.as-button--primary:hover,
.as-button--primary:focus-visible {
	background-color: var(--as-btn-primary-bg-hover);
	box-shadow: var(--as-btn-primary-shadow-hover);
	color: var(--as-btn-primary-text);
	transform: translateY(-1px);
}

.as-button--primary:active {
	box-shadow: none;
	transform: translateY(0);
}

.as-button:focus {
	outline: none;
}

.as-button:focus-visible {
	outline: 2px solid var(--as-btn-primary-text);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.as-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.as-button {
		transition: background-color 0.01ms ease, box-shadow 0.01ms ease;
	}

	.as-button--primary:hover,
	.as-button--primary:focus-visible,
	.as-button--primary:active {
		transform: none;
	}
}