/**
 * SDAweb Calendar Sync — frontend base styles.
 *
 * All selectors are prefixed `.sdaweb-gcal`. All design tokens are CSS custom
 * properties prefixed `--sdaweb-gcal-*` so a theme or per-display override can
 * restyle without touching plugin files.
 */

[data-sdaweb-gcal-id] {
	--sdaweb-gcal-color-primary: #1d5a8e;
	--sdaweb-gcal-color-accent: #3a87ad;
	--sdaweb-gcal-color-today: #1d5a8e;
	--sdaweb-gcal-color-text: #1d2327;
	--sdaweb-gcal-color-text-muted: #646970;
	--sdaweb-gcal-color-surface: #ffffff;
	--sdaweb-gcal-color-surface-alt: #f6f7f7;
	--sdaweb-gcal-color-border: #c3c4c7;
	--sdaweb-gcal-radius: 6px;
	--sdaweb-gcal-spacing: 12px;
	--sdaweb-gcal-font-size-base: 1rem;
	--sdaweb-gcal-font-size-sm: 0.875rem;
	--sdaweb-gcal-font-weight-bold: 600;
	/* `--sdaweb-gcal-color-link` intentionally not defaulted — when unset, links
	 * inherit currentColor below, which keeps them readable against any
	 * surrounding text color. Authors can opt into a brand link color via
	 * the `link_color` display option. */
}

/*
 * High-contrast overlay — automatically applied to visitors who've requested
 * stronger contrast at the OS level (Windows High Contrast, macOS Increase
 * Contrast, etc.). Bumps muted text to main text color and darkens borders
 * so the calendar reads cleanly without any per-display configuration.
 */
@media ( prefers-contrast: more ) {
	[data-sdaweb-gcal-id] {
		--sdaweb-gcal-color-text-muted: #1d2327;
		--sdaweb-gcal-color-border: #3c434a;
	}
}

.sdaweb-gcal {
	color: var( --sdaweb-gcal-color-text );
	font-size: var( --sdaweb-gcal-font-size-base );
	line-height: 1.5;
	background: var( --sdaweb-gcal-color-surface );
}

/*
 * Tabular numerals across day numbers and time labels — stops single-digit
 * dates from drifting visually next to two-digit ones in stacked rows, and
 * keeps "13:00" / "9:30" the same width.
 */
.sdaweb-gcal [class*="day-number"],
.sdaweb-gcal [class*="event-time"],
.sdaweb-gcal [class*="event__time"],
.sdaweb-gcal [class*="day__time"],
.sdaweb-gcal [class*="weeknum"],
.sdaweb-gcal time {
	font-variant-numeric: tabular-nums;
}

/*
 * Focus ring with white halo — the box-shadow lays a 4px white outer ring
 * behind the primary outline, so the focus indicator stays visible against
 * any chip background (including saturated feed colors). Without the halo
 * a dark blue outline could disappear inside a dark feed-colored chip.
 */
.sdaweb-gcal :focus-visible {
	outline: 2px solid var( --sdaweb-gcal-color-primary );
	outline-offset: 2px;
	border-radius: 2px;
	box-shadow: 0 0 0 4px #fff;
}

/*
 * Link styling — defensive defaults that survive any host theme.
 *
 * Default state: inherit text color via currentColor when no
 * `--sdaweb-gcal-color-link` is set. This is always contrast-correct
 * because the surrounding chip / panel sets text color deliberately.
 * Underline always — meets WCAG 1.4.1 (don't convey link-ness by color
 * alone) regardless of theme overrides.
 *
 * Hover/focus: jump to the explicit link color, or fall through to the
 * accent color so there's a visible interaction signal.
 *
 * Visited: kept identical to default so the calendar doesn't grow purple
 * "visited" links over time — events don't really have a visited state.
 */
.sdaweb-gcal a {
	color: var( --sdaweb-gcal-color-link, currentColor );
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.sdaweb-gcal a:visited {
	color: var( --sdaweb-gcal-color-link, currentColor );
}

.sdaweb-gcal a:hover,
.sdaweb-gcal a:focus-visible {
	color: var( --sdaweb-gcal-color-link, var( --sdaweb-gcal-color-accent ) );
	text-decoration-thickness: 2px;
}

.sdaweb-gcal-empty {
	color: var( --sdaweb-gcal-color-text-muted );
	padding: var( --sdaweb-gcal-spacing );
	text-align: center;
	background: var( --sdaweb-gcal-color-surface-alt );
	border: 1px dashed var( --sdaweb-gcal-color-border );
	border-radius: var( --sdaweb-gcal-radius );
}

.sdaweb-gcal-admin-error {
	color: #8a1f23;
	background: #fcf0f1;
	border: 1px solid #e6a3a6;
	padding: 8px 12px;
	border-radius: var( --sdaweb-gcal-radius );
	margin-bottom: var( --sdaweb-gcal-spacing );
	font-size: var( --sdaweb-gcal-font-size-sm );
}

.sdaweb-gcal-sr-only {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.sdaweb-gcal-nav {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

/*
 * Prev / Today / Next nav buttons — same `<a>`-based visited-color bleed
 * as the toggle pill. Pin the color across every link state so clicking
 * Today doesn't shift the button into the visited-link palette.
 */
.sdaweb-gcal-nav__btn,
.sdaweb-gcal-nav__btn:link,
.sdaweb-gcal-nav__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	background: var( --sdaweb-gcal-color-surface );
	border: 1px solid var( --sdaweb-gcal-color-border );
	border-radius: var( --sdaweb-gcal-radius );
	color: var( --sdaweb-gcal-color-text );
	font-size: var( --sdaweb-gcal-font-size-sm );
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sdaweb-gcal-nav__btn:hover,
.sdaweb-gcal-nav__btn:focus,
.sdaweb-gcal-nav__btn:focus-visible {
	border-color: var( --sdaweb-gcal-color-primary );
	color: var( --sdaweb-gcal-color-primary );
	text-decoration: none;
}

.sdaweb-gcal-nav__btn--today {
	font-weight: var( --sdaweb-gcal-font-weight-bold );
}

.sdaweb-gcal-nav__icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/*
 * Unified titlebar — the single horizontal bar above every view.
 *
 * Two regions:
 *   .sdaweb-gcal-chrome__title    — view-supplied <h3> + prev/today/next nav
 *   .sdaweb-gcal-chrome__controls — search, date-jump, view-toggle, ICS subscribe
 *
 * The bar wraps when content can't fit in one row. `container-type: inline-size`
 * lets nested controls collapse based on the bar's actual rendered width — so
 * a Mini view in a 240px sidebar gets icon-only collapses regardless of the
 * page's viewport, and a Month view in a 1200px main column never collapses.
 *
 * Title font sizing uses --sdaweb-gcal-chrome-title-size so each view can
 * scale the title independently without overriding the chrome layout.
 */

.sdaweb-gcal {
	--sdaweb-gcal-chrome-title-size: 1.125rem;
	--sdaweb-gcal-chrome-gap: 10px;
}

.sdaweb-gcal--mini {
	--sdaweb-gcal-chrome-title-size: 0.9375rem;
	--sdaweb-gcal-chrome-gap: 6px;
}

.sdaweb-gcal-chrome {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var( --sdaweb-gcal-chrome-gap, 10px );
	row-gap: 8px;
	margin-bottom: var( --sdaweb-gcal-spacing );
	container-type: inline-size;
}

.sdaweb-gcal-chrome__title,
.sdaweb-gcal-chrome__controls {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sdaweb-gcal-chrome__title {
	flex: 0 1 auto;
	flex-wrap: wrap;
}

.sdaweb-gcal-chrome__title-text {
	font-size: var( --sdaweb-gcal-chrome-title-size );
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	color: var( --sdaweb-gcal-color-text );
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	min-width: 0;
}

/*
 * Scoped under `.sdaweb-gcal` to bump specificity from 0,0,1,0 to 0,0,2,0
 * so themes that ship `* { margin: 0 }` (e.g. The7) can't reset the auto
 * margin that pushes controls to the opposite edge of the bar. The chrome
 * wrapper is always nested inside `.sdaweb-gcal`, so the scoping is always
 * structurally valid.
 */
.sdaweb-gcal .sdaweb-gcal-chrome__controls {
	flex: 0 0 auto;
	flex-wrap: wrap;
	margin-inline-start: auto;
}

/*
 * Live search + date-jump inputs.
 *
 * The wrapper carries the visual chrome (pill shape, soft fill, focus ring)
 * and the bare <input> sits inside as an invisible text field. This keeps
 * the icon and clear-button on dedicated flex slots so text never collides
 * with them, and matches the Subscribe pill / view-toggle visual language
 * (~32px height, pill border-radius, no rest-state border).
 *
 * Theme input styling is defeated below by `border: 0; background: transparent;`
 * inside the .sdaweb-gcal scope — without that, themes like The7 leak their
 * own input borders into the calendar.
 */

.sdaweb-gcal-search,
.sdaweb-gcal-date-jump {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 8px 0 12px;
	background: var( --sdaweb-gcal-color-surface-alt, #f6f7f7 );
	border: 1px solid transparent;
	border-radius: 999px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.sdaweb-gcal-search:hover,
.sdaweb-gcal-date-jump:hover {
	background: var( --sdaweb-gcal-color-surface, #fff );
	border-color: var( --sdaweb-gcal-color-border, #c3c4c7 );
}

.sdaweb-gcal-search:focus-within,
.sdaweb-gcal-date-jump:focus-within {
	background: var( --sdaweb-gcal-color-surface, #fff );
	border-color: var( --sdaweb-gcal-color-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --sdaweb-gcal-color-primary ) 18%, transparent );
}

/* ---- Inputs themselves: invisible, just the text. ---- */

.sdaweb-gcal-search__input,
.sdaweb-gcal-date-jump__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font: inherit;
	font-size: var( --sdaweb-gcal-font-size-sm );
	line-height: normal;
	color: var( --sdaweb-gcal-color-text );
}

.sdaweb-gcal-search__input::placeholder,
.sdaweb-gcal-date-jump__input::placeholder {
	color: var( --sdaweb-gcal-color-text-muted );
	opacity: 1;
}

/*
 * Defeat any theme-supplied input styling. Themes (verified against The7,
 * Astra, Avada) reset `input` with their own height, margin, line-height,
 * and box-sizing — those leak through the wrapper's pill design and make
 * the typed text float visibly above the wrapper's vertical center.
 * Pin every dimension that affects vertical centering.
 */
.sdaweb-gcal input[type="search"].sdaweb-gcal-search__input,
.sdaweb-gcal input[type="date"].sdaweb-gcal-date-jump__input,
.sdaweb-gcal input[type="text"].sdaweb-gcal-date-jump__input {
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	height: auto;
	line-height: 1.4;
	box-sizing: border-box;
	vertical-align: middle;
}

/*
 * Same defeat rule on `:focus` — themes (e.g. The7) apply
 * `input[type="search"]:focus { box-shadow: ... }` which beats our wrapper's
 * focus-within halo because of higher specificity. Pin the input itself to
 * "no chrome" on focus too, then let the wrapper paint the halo.
 */
.sdaweb-gcal input[type="search"].sdaweb-gcal-search__input:focus,
.sdaweb-gcal input[type="date"].sdaweb-gcal-date-jump__input:focus,
.sdaweb-gcal input[type="text"].sdaweb-gcal-date-jump__input:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	margin: 0;
	height: auto;
	line-height: 1.4;
}

/* ---- Search icon (leading, in flex slot) ---- */

.sdaweb-gcal-search__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var( --sdaweb-gcal-color-text-muted );
}

/* ---- Clear button (trailing, in flex slot) ---- */

.sdaweb-gcal-search__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var( --sdaweb-gcal-color-text-muted );
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sdaweb-gcal-search__clear:hover,
.sdaweb-gcal-search__clear:focus-visible {
	background: var( --sdaweb-gcal-color-border );
	color: var( --sdaweb-gcal-color-text );
}

.sdaweb-gcal-search__clear svg {
	width: 10px;
	height: 10px;
}

.sdaweb-gcal-search__clear[hidden] {
	display: none;
}

/*
 * Search match highlight — chips that contain the current search query get
 * `is-search-match` added by chrome-controls.js. The highlight emphasises
 * matches without hiding non-matches: visitors keep context (surrounding
 * dates, events around the match) which is more useful than a filtered
 * list in a calendar.
 *
 * Color is themable via --sdaweb-gcal-color-search-match. Default amber
 * works against every shipped preset palette. Themes/presets that want
 * different can override the variable.
 */
.sdaweb-gcal {
	--sdaweb-gcal-color-search-match: #e8a317;
}

.sdaweb-gcal-month__event.is-search-match,
.sdaweb-gcal-month__ribbon.is-search-match,
.sdaweb-gcal-week__event.is-search-match,
.sdaweb-gcal-day__event.is-search-match,
.sdaweb-gcal-card.is-search-match,
.sdaweb-gcal-event.is-search-match,
.sdaweb-gcal-mini__panel-event.is-search-match,
.sdaweb-gcal-mini__popover-event.is-search-match {
	box-shadow: 0 0 0 2px var( --sdaweb-gcal-color-search-match );
	border-inline-start-color: var( --sdaweb-gcal-color-search-match );
}

/* Non-matching chips fade slightly so matches stand out without removing
 * them from the visual context. */
.sdaweb-gcal--searching .sdaweb-gcal-month__event:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-month__ribbon:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-week__event:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-day__event:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-card:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-event:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-mini__panel-event:not( .is-search-match ),
.sdaweb-gcal--searching .sdaweb-gcal-mini__popover-event:not( .is-search-match ) {
	opacity: 0.35;
}

/* Legacy hide-non-match class kept for safety; no longer applied by the
 * default JS but exposed as an opt-in via custom code. */
.is-search-hidden {
	display: none !important;
}

/* ---- Date jump label as small caption inside wrapper ---- */

.sdaweb-gcal-date-jump__label {
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 500;
	color: var( --sdaweb-gcal-color-text-muted );
	white-space: nowrap;
}

/* Native calendar picker indicator — match brand color. */
.sdaweb-gcal-date-jump__input::-webkit-calendar-picker-indicator {
	cursor: pointer;
	filter: opacity( 0.6 );
}

.sdaweb-gcal-date-jump__input::-webkit-calendar-picker-indicator:hover {
	filter: opacity( 1 );
}

/*
 * Position modifier — the option carried over from previous releases now
 * controls which side of the bar the controls cluster sits on. Default
 * (top-right): title left, controls right via margin-inline-start: auto on
 * the controls region. top-left flips the layout via flex order. top-center
 * collapses the auto-margin so both regions pack to the centerline.
 */

.sdaweb-gcal .sdaweb-gcal-chrome--top-left .sdaweb-gcal-chrome__title {
	order: 2;
	margin-inline-start: auto;
}

.sdaweb-gcal .sdaweb-gcal-chrome--top-left .sdaweb-gcal-chrome__controls {
	order: 1;
	margin-inline-start: 0;
}

.sdaweb-gcal-chrome--top-center {
	justify-content: center;
}

.sdaweb-gcal-chrome--top-center .sdaweb-gcal-chrome__title,
.sdaweb-gcal-chrome--top-center .sdaweb-gcal-chrome__controls {
	flex: 0 0 auto;
	margin-inline-start: 0;
}

.sdaweb-gcal-view-toggle {
	display: flex;
}

/*
 * Container-query collapse cascade. The bar adapts to its own rendered
 * width via `container-type: inline-size` on the wrapper, so embedding the
 * same view in a 240px sidebar vs a 600px column yields appropriate density
 * without per-context CSS.
 *
 * Collapse order (least-essential first):
 *   < 500px: search input collapses to icon-trigger; click expands inline
 *   < 380px: ICS Subscribe label hides (icon-only)
 *   < 380px: date-jump label hides
 *   < 300px: view-toggle pill labels hide (icon-only)
 *   < 240px: "Today" button drops; prev/next + month label only
 *
 * Outer thresholds (500, 380) sit comfortably above Mini view's natural
 * ~340-360px chrome inline-size. Earlier 480/360 thresholds flapped on
 * the boundary depending on theme padding/border around the wrapper.
 */

.sdaweb-gcal-search__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var( --sdaweb-gcal-color-text-muted );
	border-radius: 50%;
	cursor: pointer;
}

.sdaweb-gcal-search__toggle:hover,
.sdaweb-gcal-search__toggle:focus-visible {
	color: var( --sdaweb-gcal-color-text );
}

.sdaweb-gcal-search__toggle .sdaweb-gcal-search__icon {
	width: 14px;
	height: 14px;
}

@container ( max-width: 500px ) {
	.sdaweb-gcal-chrome .sdaweb-gcal-search:not( .is-expanded ) {
		padding: 0;
		background: transparent;
		border-color: transparent;
		box-shadow: none;
	}
	.sdaweb-gcal-chrome .sdaweb-gcal-search:not( .is-expanded ) .sdaweb-gcal-search__icon:not( .sdaweb-gcal-search__toggle .sdaweb-gcal-search__icon ) {
		display: none;
	}
	.sdaweb-gcal-chrome .sdaweb-gcal-search:not( .is-expanded ) .sdaweb-gcal-search__input,
	.sdaweb-gcal-chrome .sdaweb-gcal-search:not( .is-expanded ) .sdaweb-gcal-search__clear {
		display: none;
	}
	.sdaweb-gcal-chrome .sdaweb-gcal-search__toggle {
		display: inline-flex;
	}
	.sdaweb-gcal-chrome .sdaweb-gcal-search.is-expanded {
		flex: 1 1 100%;
	}
	.sdaweb-gcal-chrome .sdaweb-gcal-search.is-expanded .sdaweb-gcal-search__toggle {
		display: none;
	}
}

@container ( max-width: 380px ) {
	.sdaweb-gcal-chrome .sdaweb-gcal-ics__button-label,
	.sdaweb-gcal-chrome .sdaweb-gcal-date-jump__label {
		border: 0;
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}
	.sdaweb-gcal-chrome .sdaweb-gcal-ics__button {
		padding: 0 8px;
	}
}

@container ( max-width: 300px ) {
	.sdaweb-gcal-chrome .sdaweb-gcal-view-toggle__label {
		border: 0;
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}
}

@container ( max-width: 240px ) {
	.sdaweb-gcal-chrome .sdaweb-gcal-nav__btn--today {
		display: none;
	}
}

.sdaweb-gcal-view-toggle--top-right {
	justify-content: flex-end;
}

.sdaweb-gcal-view-toggle--top-left {
	justify-content: flex-start;
}

.sdaweb-gcal-view-toggle--top-center {
	justify-content: center;
}

.sdaweb-gcal-event__recurrence {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	color: var( --sdaweb-gcal-color-text-muted );
	vertical-align: middle;
	cursor: help;
}

.sdaweb-gcal-event__recurrence-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.sdaweb-gcal-event__recurrence-text {
	font-size: var( --sdaweb-gcal-font-size-sm );
	font-weight: 400;
	font-style: italic;
}

.sdaweb-gcal-event__recurrence--icon .sdaweb-gcal-event__recurrence-text {
	display: none;
}

.sdaweb-gcal-view-toggle__group {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var( --sdaweb-gcal-color-surface-alt );
	border: 1px solid var( --sdaweb-gcal-color-border );
	border-radius: calc( var( --sdaweb-gcal-radius ) + 2px );
}

.sdaweb-gcal-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: var( --sdaweb-gcal-font-size-sm );
	font-weight: 500;
	color: var( --sdaweb-gcal-color-text-muted );
	text-decoration: none;
	border-radius: var( --sdaweb-gcal-radius );
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.sdaweb-gcal-view-toggle__btn:hover,
.sdaweb-gcal-view-toggle__btn:focus-visible {
	background: var( --sdaweb-gcal-color-surface );
	color: var( --sdaweb-gcal-color-text );
	text-decoration: none;
}

/*
 * Active toggle pill — text MUST stay readable on the primary fill regardless
 * of whether the URL is in browser history. The global `.sdaweb-gcal a:visited`
 * rule (0,2,1) would otherwise win over a single `.is-active` (0,2,0) and
 * paint the active label in --sdaweb-gcal-color-link, which is dark against
 * the dark primary fill (severe under any preset where link_color ≈ primary).
 *
 * Listing every link state explicitly bumps specificity past the visited
 * rule (0,3,0+) and defends against future state-specific rules.
 *
 * --sdaweb-gcal-color-on-primary lets per-display / preset styling pick
 * white or near-black depending on primary luminance (e.g. Sunset preset
 * has a light primary that wants dark active text). Default `#fff` works
 * for every preset that ships saturated dark primaries.
 */
.sdaweb-gcal-view-toggle__btn.is-active,
.sdaweb-gcal-view-toggle__btn.is-active:link,
.sdaweb-gcal-view-toggle__btn.is-active:visited,
.sdaweb-gcal-view-toggle__btn.is-active:hover,
.sdaweb-gcal-view-toggle__btn.is-active:focus,
.sdaweb-gcal-view-toggle__btn.is-active:focus-visible {
	background: var( --sdaweb-gcal-color-primary );
	color: var( --sdaweb-gcal-color-on-primary, #fff );
	font-weight: var( --sdaweb-gcal-font-weight-bold );
	text-decoration: none;
}

.sdaweb-gcal-view-toggle__icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.sdaweb-gcal-view-toggle__label {
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 540px ) {
	.sdaweb-gcal-view-toggle--top-right,
	.sdaweb-gcal-view-toggle--top-left {
		justify-content: center;
	}
	.sdaweb-gcal-view-toggle__btn {
		padding: 6px 8px;
	}
	.sdaweb-gcal-view-toggle__label {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sdaweb-gcal,
	.sdaweb-gcal * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.sdaweb-gcal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 8px 0 12px;
	font-size: var( --sdaweb-gcal-font-size-sm );
	color: var( --sdaweb-gcal-color-text-muted );
	border-bottom: 1px solid var( --sdaweb-gcal-color-border );
	margin-bottom: 10px;
}

.sdaweb-gcal-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sdaweb-gcal-legend__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}