/*
 * The star.
 *
 * One icon, filled or not from aria-pressed, so the picture cannot disagree
 * with what the button says it is. The form wrapper exists only to make the
 * thing work without JavaScript and must take up no room of its own.
 */

.fc-bookmark {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.fc-bookmark__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A 44px target: this is pressed on a phone, in a list, with a thumb. */
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var( --fc-muted, #6b6257 );
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fc-bookmark__icon {
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linejoin: round;
	transition: fill 120ms ease-out, transform 120ms ease-out;
}

.fc-bookmark__button[aria-pressed="true"] {
	color: var( --fc-accent, #c8860d );
}

.fc-bookmark__button[aria-pressed="true"] .fc-bookmark__icon {
	fill: currentcolor;
}

.fc-bookmark__button:hover .fc-bookmark__icon,
.fc-bookmark__button:focus-visible .fc-bookmark__icon {
	transform: scale( 1.12 );
}

.fc-bookmark__button:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.fc-bookmark__icon {
		transition: none;
	}

	.fc-bookmark__button:hover .fc-bookmark__icon,
	.fc-bookmark__button:focus-visible .fc-bookmark__icon {
		transform: none;
	}
}

/*
 * The labelled button, for a listing's own page. A row can only afford an
 * icon and is read alongside a dozen others, so there the star reads as a
 * control on its own. On its own page there is room to say what it does, and
 * saving is what the page is asking for.
 */

.fc-bookmark--full {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.fc-bookmark--full .fc-bookmark__button {
	gap: 0.5rem;
	min-width: 0;
	padding: 0 1rem 0 0.75rem;
	border: 2px solid currentcolor;
	font: inherit;
	font-weight: 600;
}

.fc-bookmark__face {
	white-space: nowrap;
}

/*
 * Said as people rather than saves, and left alone by the script: a number
 * that ticked up the instant you pressed the button would be about you, not
 * about them.
 */
.fc-bookmark__count {
	margin: 0;
	padding-left: 0.25rem;
	font-size: 0.875rem;
	color: var( --fc-muted, #6b6257 );
}