/**
 * 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;
	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. 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;
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

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

/* Keep the control discoverable and provide a practical target on touch input. */
@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;
	}
}