/**
 * Shared accessibility safeguards for Integrate4 custom interfaces.
 *
 * @author i4 Development
 */

:root {
	--i4-accessibility-focus: #0878e6;
}

body.appearance-dark,
html[data-ra-theme="dark"] {
	--i4-accessibility-focus: #70b7ff;
}

:where([class^="i4-"], [class*=" i4-"]):is(a, button, input, select, textarea, [tabindex]):focus-visible,
:where([class^="i4-"], [class*=" i4-"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--i4-accessibility-focus) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

:where([class^="i4-"], [class*=" i4-"]):is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible,
:where([class^="i4-"], [class*=" i4-"]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible {
	border-color: var(--i4-accessibility-focus) !important;
	outline: 0 !important;
	box-shadow: inset 0 0 0 2px var(--i4-accessibility-focus) !important;
}

:where([class^="i4-"], [class*=" i4-"]) :is(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea),
:where([class^="i4-"], [class*=" i4-"]):is(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
	min-height: 44px;
}

:where([class^="i4-"], [class*=" i4-"]) :is(h1, h2, h3, h4, p, a, button, label, code),
:where([class^="i4-"], [class*=" i4-"]):is(h1, h2, h3, h4, p, a, button, label, code) {
	overflow-wrap: anywhere;
}

:where([class^="i4-"], [class*=" i4-"]) [aria-disabled="true"] {
	cursor: not-allowed;
	opacity: .65;
}

:where([class^="i4-"], [class*=" i4-"]) :target {
	scroll-margin-block: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	:where([class^="i4-"], [class*=" i4-"]),
	:where([class^="i4-"], [class*=" i4-"]) *,
	:where([class^="i4-"], [class*=" i4-"]) *::before,
	:where([class^="i4-"], [class*=" i4-"]) *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

@media (forced-colors: active) {
	:where([class^="i4-"], [class*=" i4-"]) :is(button, a, input, select, textarea) {
		border: 1px solid ButtonText;
		forced-color-adjust: auto;
	}

	:where([class^="i4-"], [class*=" i4-"]):is(a, button, input, select, textarea, [tabindex]):focus-visible,
	:where([class^="i4-"], [class*=" i4-"]) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline: 2px solid Highlight !important;
		outline-offset: 2px !important;
		box-shadow: none !important;
	}
}