.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 2.75rem;
	padding: 0.25rem 2.5rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--hr-color-text);
	font: inherit;
	font-size: var(--hr-font-size-base);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition:
		filter 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease,
		transform 0.15s ease;
}

.button:disabled,
.button[disabled] {
	cursor: not-allowed;
	opacity: 0.75;
}


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

.button--icon {
	gap: 0;
	min-width: 2rem;
	min-height: 2rem;
	padding: 0;
	border-radius: 50%;
}

.button--accent {
	border-color: transparent;
	background: var(--hr-gradient-accent);
	color: #ffffff;
}

.button--accent:hover:not(:disabled):not([disabled]),
.button--accent:focus-visible:not(:disabled):not([disabled]) {
	filter: brightness(1.1);
	box-shadow: var(--hr-shadow-accent);
}

.button--accent:active:not(:disabled):not([disabled]) {
	transform: scale(0.96);
	filter: brightness(0.98);
	box-shadow: none;
}

.button--dark {
	border-color: transparent;
	background: var(--hr-gradient-dark);
	color: #ffffff;
}

.button--dark svg {
	fill: currentColor;
}

.button--dark:hover:not(:disabled):not([disabled]),
.button--dark:focus-visible:not(:disabled):not([disabled]) {
	filter: brightness(1.1);
	box-shadow: var(--hr-shadow-dark);
}

.button--dark:active:not(:disabled):not([disabled]) {
	transform: scale(0.96);
	filter: brightness(0.98);
	box-shadow: none;
}