/**
 * Button, after the style guide's Buttons page (the guide's own copy is
 * .sba-sg-btn in style-guide.css): 40px tall with 16px of side padding, or
 * 44px with 32px for lg, or 36px with 12px for sm (the prototype's small
 * size, on the past events' cards; the guide does not show it yet); 14px
 * at weight 500, --sba-radius-md corners, an 8px gap and a 16px icon. An arrow follows the label and moves 4px on hover; any
 * other icon precedes it and stays put (sba-c-button-icon-static). Six
 * variants: primary in the dark red that clears AA behind white, outline for
 * the second action on a light field, glass on photographs, ghost for a third
 * action in charcoal, link for text only in the dark red, and pill, the small
 * rounded action beside a hero's two buttons on a photograph or dark field.
 *
 * Two classes on every rule: MyListing colors every `a` and the kit's Theme
 * Style reaches `button` elements.
 */

.sba-c-button.sba-c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--sba-radius-md);
	font-family: var(--sba-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.sba-c-button.sba-c-button-lg {
	min-height: 44px;
	padding: 0 32px;
}

.sba-c-button.sba-c-button-sm {
	min-height: 36px;
	padding: 0 12px;
}

/* Line height 1: inheriting the label's 20px, the glyph sat at the top of
 * a 20px box, 2.5px above the middle of the capitals. */
.sba-c-button .sba-c-button-icon {
	font-size: 16px;
	line-height: 1;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-c-button:hover .sba-c-button-icon {
	transform: translateX(4px);
}

.sba-c-button:hover .sba-c-button-icon-static {
	transform: none;
}

.sba-c-button:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-c-button.sba-c-button-primary,
.sba-c-button.sba-c-button-primary:hover,
.sba-c-button.sba-c-button-primary:focus {
	background-color: var(--sba-red-dark);
	color: var(--sba-red-contrast);
}

.sba-c-button.sba-c-button-primary:hover {
	background-color: var(--sba-red-darker);
}

.sba-c-button.sba-c-button-outline,
.sba-c-button.sba-c-button-outline:focus {
	border-color: var(--sba-input);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
}

.sba-c-button.sba-c-button-outline:hover {
	border-color: var(--sba-input);
	background-color: var(--sba-accent);
	color: var(--sba-charcoal);
}

.sba-c-button.sba-c-button-glass,
.sba-c-button.sba-c-button-glass:focus {
	border-color: hsl(0 0% 100% / 0.5);
	background-color: hsl(0 0% 100% / 0.1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
}

.sba-c-button.sba-c-button-glass:hover {
	border-color: #fff;
	background-color: #fff;
	color: var(--sba-charcoal);
}

.sba-c-button.sba-c-button-ghost,
.sba-c-button.sba-c-button-ghost:focus {
	background-color: transparent;
	color: var(--sba-charcoal);
}

.sba-c-button.sba-c-button-ghost:hover {
	background-color: var(--sba-accent);
	color: var(--sba-charcoal);
}

.sba-c-button.sba-c-button-pill,
.sba-c-button.sba-c-button-pill:focus {
	min-height: 0;
	padding: 6px 16px;
	border-color: hsl(0 0% 100% / 0.4);
	border-radius: 9999px;
	background-color: hsl(0 0% 100% / 0.1);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
}

.sba-c-button.sba-c-button-pill:hover {
	border-color: hsl(0 0% 100% / 0.4);
	background-color: #fff;
	color: var(--sba-charcoal);
}

.sba-c-button.sba-c-button-link,
.sba-c-button.sba-c-button-link:focus {
	min-height: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--sba-red-dark);
}

.sba-c-button.sba-c-button-link:hover {
	color: var(--sba-red-darker);
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-button:hover .sba-c-button-icon {
		transform: none;
	}
}

/* On a phone a label longer than the screen wraps instead of pushing the
   page sideways (the Directory's "How to create, claim or update your
   company listing"); the padding keeps a wrapped button's height in step.
   Last in the file, so it follows the sizes' padding. */
@media (max-width: 639px) {
	.sba-c-button.sba-c-button {
		max-width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		white-space: normal;
	}
}