[data-scc-scl-widget] {
	--scc-scl-border: color-mix(in srgb, currentColor 18%, transparent);
	--scc-scl-muted: color-mix(in srgb, currentColor 68%, transparent);
	color-scheme: light dark;
	inline-size: 100%;
	margin-block: 0 1.5rem;
}

[data-scc-scl-widget] [hidden] {
	display: none !important;
}

form.scc-scl-login-replacement {
	background: transparent;
	border: 0;
	margin-block: 0 1.5rem;
	padding: 0;
}

.scc-scl__header {
	margin-block-end: 1rem;
}

.scc-scl__header h2 {
	font: inherit;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 650;
	margin: 0 0 .35rem;
}

.scc-scl__header p,
.scc-scl__status,
.scc-scl__error {
	color: var(--scc-scl-muted);
	font-size: .95rem;
	margin: 0 0 .75rem;
}

.scc-scl__fallback,
.scc-scl__local-login {
	appearance: none;
	background: var(--sdc-action, #72bce4);
	border: 1px solid var(--sdc-line, rgba(33, 30, 62, .22));
	border-radius: .7rem;
	color: var(--sdc-action-text, #211e3e);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin-inline-end: .5rem;
	padding: .75rem 1rem;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.scc-scl__fallback:hover {
	background: var(--sdc-action-hover, #91d3f6);
	border-color: var(--sdc-action-hover, #91d3f6);
}

.scc-scl__fallback:active {
	transform: translateY(1px);
}

.scc-scl__local-login {
	background: transparent;
	border: 1px solid var(--scc-scl-border);
	color: inherit;
	display: inline-block;
	transition: border-color .16s ease, background-color .16s ease;
}

.scc-scl__fallback:focus-visible,
.scc-scl__local-login:focus-visible {
	outline: 3px solid Highlight;
	outline-offset: 3px;
}

[dir="rtl"] [data-scc-scl-widget] {
	direction: rtl;
	text-align: start;
}

@media (prefers-reduced-motion: reduce) {
	[data-scc-scl-widget] * {
		scroll-behavior: auto !important;
	}
}