/**
 * Frontend styles for Trigger component accessibility
 * All styles are scoped to only affect Trigger component elements
 */

.hidden-trigger-link,
.hidden-box-link {
	all: unset;
}

.hidden-trigger-link:after,
.hidden-trigger-link:before {
	display: none;
}

.has-trigger > .hidden-trigger-link,
.has-trigger > .hidden-box-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

[data-greyd-trigger][data-onload="hide"][data-onload="hide"] {
	display: none;
}

/* Focus indicators for trigger elements */
.has-trigger:focus-visible,
.has-trigger[onclick]:focus-visible,
[data-greyd-trigger]:focus-visible,
.has-trigger button[role="button"]:focus-visible,
a.has-trigger:focus-visible,
:has(> .hidden-trigger-link:focus-visible) {
	outline: 2px dotted var( --text-color, var(--wp--preset--color--foreground, currentColor) );
	outline-offset: 2px;
}

/* Focus indicators for trigger elements with backgrounds */
.has-trigger.has-background:focus-visible,
.has-trigger[onclick].has-background:focus-visible,
[data-greyd-trigger].has-background:focus-visible,
.has-background:has(> .hidden-trigger-link:focus-visible) {
	outline-color: var(--wp--preset--color--foreground, currentColor);
}

/* Ensure trigger elements are focusable */
.has-trigger,
.has-trigger[onclick],
[data-greyd-trigger],
.has-trigger button[role="button"],
a.has-trigger,
:has(> .hidden-trigger-link) {
	cursor: pointer;
}

/* Focus management for trigger regions */
[role="region"][data-greyd-trigger] {
	position: relative;
}

/* Popup trigger states - scoped to has-trigger elements */
/* These selectors are available for custom styling if needed:
.has-trigger[aria-controls^="popup_"][aria-expanded="true"] { }
.has-trigger[aria-controls^="popup_"][aria-expanded="false"] { }
*/

/* High contrast mode support */
@media (prefers-contrast: high) {
	.has-trigger:focus-visible,
	.has-trigger[onclick]:focus-visible,
	[data-greyd-trigger]:focus-visible,
	.has-trigger button[role="button"]:focus-visible,
	a.has-trigger:focus-visible,
	:has(> .hidden-trigger-link:focus-visible) {
		outline: 3px solid;
		outline-offset: 3px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.has-trigger,
	[data-greyd-trigger],
	.has-trigger button[role="button"],
	a.has-trigger,
	:has(> .hidden-trigger-link) {
		transition: none !important;
	}
}