/**
 * OrioleOne 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;
	box-sizing: border-box;
	min-width: 24px;
	min-height: 24px;
	max-width: calc(100% - 1em);

	/* 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.22);
	border: 1px solid currentcolor;
	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. 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);
}

/* Show when the button itself receives focus (standalone keyboard nav). */
.oriole-oic-copy-btn:focus {
	opacity: 1;
	outline: 3px solid currentcolor;
	outline-offset: 2px;
}

/* Keyboard focus ring — uses :focus-visible for keyboard navigation. */
.oriole-oic-copy-btn:focus-visible {
	outline: 3px solid currentcolor;
	outline-offset: 2px;
}

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

/* -------------------------------------------------------------------------
   4. Visibility — show on hover / keyboard focus within container
   ------------------------------------------------------------------------- */

/* 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;
}

/* -------------------------------------------------------------------------
   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: currentcolor;
	opacity: 1; /* Keep visible during success feedback. */
}

.oriole-oic-copy-btn.is-error,
.oriole-oic-copy-btn.is-error:hover {
	background: rgba(192, 0, 0, 0.18);
	border-color: currentcolor;
	opacity: 1;
}

.oriole-oic-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.oriole-oic-status {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

@media ( prefers-reduced-motion: reduce ) {

	.oriole-oic-copy-btn {
		transition: none;
	}
}

/* Discoverable and practical touch target on coarse pointer devices. */
@media ( hover: none ), ( pointer: coarse ) {

	.oriole-oic-copy-btn {
		min-width: 44px;
		min-height: 44px;
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
   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,
	.oriole-oic-copy-btn:focus-visible {
		outline: 3px solid Highlight;
	}
}