/*
 * A location's call and chat buttons (AIEO_Location_Contact::buttons(), 11.3.6; their own sheet since 11.3.10), wherever
 * they are drawn: beside a form's button (.aieo-form-button-wrap) and under the product request card's
 * (.aieo-contact-row). Outlined in the theme's button outline, its shape, type and padding, so the button they stand by
 * stays the one in colour; the icon (a phone, the app's mark) in the text's colour; 44 px high at the least. Two
 * classes, so a theme's link colour and underline (a, a:hover) do not reach them.
 *
 * A call button with the location's opening hours (.has-hours) carries a second line under the number, the hours in
 * the server's words and, once the hours logic has asked the clock (assets/js/aieo-hours.js, before the first paint),
 * "We're open until 17:00" or "We open Monday at 9:00". The line keeps its place whatever it says (one line, cut with an
 * ellipsis), so nothing moves when it changes. Closed (.is-closed) it reads quieter, the text's muted colour and the
 * line's colour for its edge: nothing to press, no hover (the inline display), or, set to the dialog (the number alone,
 * no hours line), a press opens the hours dialog instead of calling (aieo-hours-dialog.css); the chat buttons beside
 * it stay as they are.
 */
:is(.aieo-form-button-wrap, .aieo-contact-row) .aieo-form-contact {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 2.75rem;
	/* The theme's button padding less the outline, so the two stand the same height. */
	padding: calc(0.8rem - 1px) calc(1.25rem - 1px);
	border: 1px solid var(--wp--custom--rooster--button--outline, currentColor);
	border-radius: var(--wp--custom--rooster--shape--button, var(--wp--custom--rooster--shape--control, 0));
	background: transparent;
	color: var(--wp--preset--color--fg, inherit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
}

:is(.aieo-form-button-wrap, .aieo-contact-row) .aieo-form-contact:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

:is(.aieo-form-button-wrap, .aieo-contact-row) .aieo-form-contact:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px color-mix(in srgb, currentColor 40%, transparent));
}

.aieo-form-contact__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/* The number, and the hours under it. */
.aieo-form-contact__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	text-align: start;
}

.aieo-form-contact__note {
	max-width: 100%;
	overflow: hidden;
	color: var(--wp--preset--color--muted, currentColor);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 400;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

:is(.aieo-form-button-wrap, .aieo-contact-row) .aieo-form-contact.is-closed {
	color: var(--wp--preset--color--muted, currentColor);
	border-color: var(--wp--preset--color--line, currentColor);
	cursor: default;
}

:is(.aieo-form-button-wrap, .aieo-contact-row) .aieo-form-contact.is-closed:not([role="button"]):hover {
	background: transparent;
}

:is(.aieo-form-button-wrap, .aieo-contact-row) .aieo-form-contact.is-closed[role="button"] {
	cursor: pointer;
}