/**
 * GMI Doc Options: options bar above embedded Google Docs.
 *
 * Tweak colors and spacing by overriding the custom properties, e.g. in the
 * Site Editor's Additional CSS:
 *
 *     .gmi-options-bar { --gmi-bar-bg: #000; --gmi-btn-text: #fff; }
 *
 * Width: the bar is a sibling of the iframe, so a constrained group layout caps
 * both at the same content width. --gmi-bar-width (set inline from the iframe's
 * width attribute) matches fixed-width iframes. No max-width is declared here
 * on purpose: it would override the layout's own max-width.
 */

.gmi-options-bar {
	/* Colors. */
	--gmi-bar-bg: #141414;
	--gmi-bar-text: #e6e6e6;
	--gmi-bar-border: rgba(255, 255, 255, 0.14);
	--gmi-btn-bg: rgba(255, 255, 255, 0.06);
	--gmi-btn-bg-hover: rgba(255, 255, 255, 0.16);
	--gmi-btn-text: #f5f5f5;
	--gmi-btn-border: rgba(255, 255, 255, 0.5);
	--gmi-hint-text: rgba(255, 255, 255, 0.7);
	--gmi-focus-ring: #f5f5f5;

	/* Shape and spacing. */
	--gmi-radius: 4px;
	--gmi-gap: 0.5rem;
	--gmi-bar-padding: 0.5rem 0.75rem;
	--gmi-btn-padding: 0.35rem 0.8rem;
	--gmi-font-size: 0.875rem;

	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gmi-gap);
	width: min(var(--gmi-bar-width, 100%), 100%);
	margin-block-end: var(--gmi-gap);
	padding: var(--gmi-bar-padding);
	border: 1px solid var(--gmi-bar-border);
	border-radius: var(--gmi-radius);
	background: var(--gmi-bar-bg);
	color: var(--gmi-bar-text);
	font-size: var(--gmi-font-size);
	line-height: 1.4;
}

/* Keep the iframe snug under the bar (layouts add a block gap between siblings). */
.gmi-options-bar + iframe {
	margin-block-start: 0;
}

.gmi-options-bar__label {
	margin-inline-end: 0.25rem;
	font-weight: 600;
}

/* Extra specificity so theme link styles (color, underline) do not win. */
.gmi-options-bar a.gmi-options-bar__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--gmi-btn-padding);
	border: 1px solid var(--gmi-btn-border);
	border-radius: var(--gmi-radius);
	background: var(--gmi-btn-bg);
	color: var(--gmi-btn-text);
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.gmi-options-bar a.gmi-options-bar__button:hover,
.gmi-options-bar a.gmi-options-bar__button:focus-visible {
	background: var(--gmi-btn-bg-hover);
	color: var(--gmi-btn-text);
	text-decoration: none;
}

.gmi-options-bar a.gmi-options-bar__button:focus-visible {
	outline: 2px solid var(--gmi-focus-ring);
	outline-offset: 2px;
}

/* Short hint on its own row under the buttons. */
.gmi-options-bar__hint {
	flex-basis: 100%;
	color: var(--gmi-hint-text);
	font-size: 0.8em;
}

/* Visually hidden, still read by screen readers. */
.gmi-options-bar .gmi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Small screens: label on its own row, buttons two per row (4 buttons = 2 rows). */
@media (max-width: 480px) {

	.gmi-options-bar__label {
		flex-basis: 100%;
	}

	.gmi-options-bar a.gmi-options-bar__button {
		flex: 1 1 calc(50% - var(--gmi-gap));
		min-width: 0;
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gmi-options-bar a.gmi-options-bar__button {
		transition: none;
	}
}