/* Keep the native consent UI in the site's light colour scheme. */
#tc-consent-banner,
#tc-consent-settings-link {
	color-scheme: only light;
}

#tc-consent-banner.tc-consent-banner--center::before {
	background-color: rgb(0 0 0 / 45%);
}

.tc-consent-nojs {
	background-color: #fff3cd;
	color: #856404;
}

/* Separate the switch track from the preference card in both states. */
#tc-consent-banner .tc-consent-toggle__slider {
	background-color: #65756a;
	outline: 1px solid var(--tcc-text);
	outline-offset: -1px;
}

#tc-consent-banner .tc-consent-toggle__input:checked + .tc-consent-toggle__slider {
	background-color: #123b2a;
}

#tc-consent-banner .tc-consent-toggle__input:focus-visible + .tc-consent-toggle__slider {
	outline-width: 2px;
	outline-offset: 2px;
	box-shadow: none;
}

/** The site keeps a cream control; override the plugin's white dark-mode icon. */
#tc-consent-settings-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

#tc-consent-settings-link .tc-consent-settings-icon {
	color: inherit;
}

/* Keep the native labelled control compact in portrait and landscape. */
@media (max-width: 1024px) {
	#tc-consent-settings-link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		inline-size: 44px;
		min-inline-size: 44px;
		block-size: 44px;
		padding: 0;
		gap: 0;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		left: 16px;
	}

	#tc-consent-settings-link .tc-consent-settings-text {
		display: none;
	}

	#tc-consent-settings-link .tc-consent-settings-icon {
		display: block;
		flex-shrink: 0;
		inline-size: 22px;
		block-size: 22px;
	}
}