/**
 * Oriole One Instant Copy — Copy Button Styles
 *
 * Design principles:
 *  - Absolutely positioned to avoid any Cumulative Layout Shift (CLS).
 *  - Uses `currentColor` and semi-transparent backgrounds so the button
 *    integrates with both light and dark code-block themes without
 *    hardcoding specific colours.
 *  - Visible only on hover / focus-within to stay unobtrusive.
 *  - Full keyboard / focus-visible support.
 *  - Respects `prefers-reduced-motion`.
 *  - No !important overrides; specificity is intentionally low so themes
 *    can customise without fighting the cascade.
 *
 * @since   1.0.0
 * @package Oriole_One_Instant_Copy
 */

/* ---------------------------------------------------------------------------
   1. Code block — positioning context
   --------------------------------------------------------------------------- */

/**
 * Give the pre a positioning context so the absolutely-placed button
 * is anchored to its corner rather than a distant ancestor.
 * JS sets this inline as a fallback if a theme somehow overrides it.
 */
.wp-block-code {
	position: relative;
}

/* ---------------------------------------------------------------------------
   2. Copy button — base styles
   --------------------------------------------------------------------------- */

.oriole-oic-copy-btn {
	/* Positioning – top-right corner, clear of the scrollbar. */
	position: absolute;
	top:   0.5em;
	right: 0.5em;

	/* Layout. */
	display:     inline-flex;
	align-items: center;

	/* Spacing & typography. */
	padding:     0.2em 0.55em;
	font-size:   0.7rem;
	font-family: inherit;
	line-height: 1.5;

	/* Colour – inherits text colour so it works on any theme. */
	color: currentColor;

	/* Background – neutral translucent grey: readable on both light & dark. */
	background:    rgba( 128, 128, 128, 0.15 );
	border:        1px solid rgba( 128, 128, 128, 0.3 );
	border-radius: 4px;

	/* Interaction. */
	cursor:         pointer;
	white-space:    nowrap;
	user-select:    none;
	-webkit-user-select: none;

	/* Fade in/out on hover without moving anything (no CLS). */
	opacity:    0;
	transition: opacity 0.15s ease, background-color 0.15s ease;

	/* Sit above code but below modals. */
	z-index: 10;
}

/* ---------------------------------------------------------------------------
   3. Visibility — show on hover / keyboard focus
   --------------------------------------------------------------------------- */

/* Show when the user hovers the code block. */
.wp-block-code:hover .oriole-oic-copy-btn {
	opacity: 1;
}

/* Show when keyboard focus moves into the code block. */
.wp-block-code:focus-within .oriole-oic-copy-btn {
	opacity: 1;
}

/* Show when the button itself receives focus (standalone keyboard nav). */
.oriole-oic-copy-btn:focus {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   4. Interactive states
   --------------------------------------------------------------------------- */

.oriole-oic-copy-btn:hover {
	background: rgba( 128, 128, 128, 0.28 );
}

.oriole-oic-copy-btn:active {
	background: rgba( 128, 128, 128, 0.4 );
}

/* Keyboard-only focus ring — uses :focus-visible so mouse users don't see it. */
.oriole-oic-copy-btn:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* Remove the default focus ring for pointer users (progressive enhancement). */
.oriole-oic-copy-btn:focus:not( :focus-visible ) {
	outline: none;
}

/* ---------------------------------------------------------------------------
   5. Success state — shown after a successful copy
   --------------------------------------------------------------------------- */

.oriole-oic-copy-btn.is-success,
.oriole-oic-copy-btn.is-success:hover {
	background:    rgba( 0, 160, 80, 0.18 );
	border-color:  rgba( 0, 160, 80, 0.4 );
	opacity:       1; /* Keep visible during success feedback. */
}

/* ---------------------------------------------------------------------------
   6. Reduced-motion preference
   --------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.oriole-oic-copy-btn {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   7. High-contrast mode (Windows forced-colours / -ms-high-contrast)
   --------------------------------------------------------------------------- */

@media ( forced-colors: active ) {
	.oriole-oic-copy-btn {
		forced-color-adjust: auto;
		border: 1px solid ButtonText;
	}

	.oriole-oic-copy-btn:focus-visible {
		outline: 2px solid Highlight;
	}
}