/* ==========================================================================
   Button
   Block: .button
   Modifiers: .button--primary | .button--secondary | .button--ghost
              .button--outline | .button--outline-light
              .button--sm | .button--md | .button--lg
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3); /* 12px */
	padding: var(--space-4) 1.875rem; /* 16px 30px */
	border: 1.5px solid transparent;
	border-radius: var(--radius-button); /* 40px */
	min-height: 3.1875rem; /* 51px */
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		filter var(--transition-fast);
}

.button:hover,
.button:focus-visible {
	text-decoration: none;
}

.button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.18);
}

.button--sm {
	gap: var(--space-2);
	padding: 0.625rem var(--space-4);
	border-radius: var(--radius-pill);
	min-height: 0;
	font-size: var(--font-size-sm);
}

.button--md {
	padding: var(--space-4) 1.875rem;
	min-height: 3.1875rem;
	font-size: var(--font-size-sm);
}

.button--lg {
	padding: var(--space-4) var(--space-6);
	font-size: var(--font-size-md);
}

.button--primary {
	color: var(--color-primary-contrast);
	background-color: var(--color-primary);
}

.button--primary:hover {
	filter: brightness(1.08);
}

.button--secondary {
	color: var(--color-secondary-contrast);
	background-color: var(--color-secondary);
}

.button--secondary:hover {
	filter: brightness(1.1);
}

.button--ghost {
	color: var(--color-primary);
	background-color: transparent;
	border-color: var(--color-primary);
}

.button--ghost:hover {
	color: var(--color-primary-contrast);
	background-color: var(--color-primary);
}

.button--outline {
	color: var(--color-text);
	background-color: transparent;
	border-color: rgb(18 18 18 / 0.35);
}

.button--outline:hover {
	border-color: var(--color-text);
}

.button--outline-light {
	color: var(--color-on-dark);
	background-color: transparent;
	border-color: rgb(255 255 255 / 0.7);
}

.button--outline-light:hover {
	background-color: rgb(255 255 255 / 0.12);
}