/*
 * Text tokens and their opt-in refresh control.
 *
 * The token itself is deliberately UNSTYLED apart from a hook: it sits inside
 * a sentence and must read as part of it. Anything that made a resolved value
 * look different from the words around it would turn prose into a form.
 *
 * The control is drawn with borders rather than set in a font, the family's
 * rule everywhere: no glyph here depends on Dashicons being enqueued by
 * whichever theme happens to be active, and nothing here can be stripped by
 * kses.
 */

.wpds-token {
	font-variant-numeric: tabular-nums;
}

button.wpds-token__refresh {
	appearance: none;
	background: none;
	border: 0;
	block-size: 1em;
	cursor: var( --wpds-cursor-control, pointer );
	inline-size: 1em;
	margin-inline-start: 0.25em;
	padding: 0;
	position: relative;
	vertical-align: -0.1em;
}

/* The ring, open at the top right so it reads as a cycle and not a circle. */
button.wpds-token__refresh::before {
	block-size: 0.75em;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	content: "";
	inline-size: 0.75em;
	inset-block-start: 0.12em;
	inset-inline-start: 0.12em;
	opacity: 0.65;
	position: absolute;
}

/* The head, closing the open end. */
button.wpds-token__refresh::after {
	border: 0.2em solid transparent;
	border-block-end-color: currentColor;
	content: "";
	inset-block-start: 0;
	inset-inline-end: 0;
	opacity: 0.65;
	position: absolute;
	rotate: 45deg;
}

button.wpds-token__refresh:hover::before,
button.wpds-token__refresh:hover::after {
	opacity: 1;
}

/* Only while a request is in flight, and only where motion is welcome. */
@media not ( prefers-reduced-motion ) {
	button.wpds-token__refresh.is-busy::before {
		animation: wpds-token-spin 0.7s linear infinite;
	}
}

@keyframes wpds-token-spin {
	to { rotate: 360deg; }
}

/* A control that cannot act must not look as though it could: without the
 * behaviour script the button ships disabled and stays out of the way. */
button.wpds-token__refresh[ disabled ] {
	display: none;
}

/*
 * The editing surface, once assets/interactions.js has made it one.
 *
 * Keyed on [contenteditable], never on the block's class: the attribute is
 * only ever present after hydration, so a page without the script -- and the
 * editor canvas, which never runs it -- gets none of this and stays exactly
 * the picture it was. That is what keeps wpds/composer and wpds/editor at
 * 0.00/0.00 on the pixel gate while being genuinely editable on the page.
 */
.wpds-composer [ contenteditable='true' ],
.wpds-editor [ contenteditable='true' ] {
	cursor: text;
	outline: none;
}

.wpds-composer [ contenteditable='true' ]:focus-visible,
.wpds-editor [ contenteditable='true' ]:focus-visible {
	border-radius: var( --wpds-border-radius-sm, 2px );
	box-shadow: 0 0 0 2px var( --wpds-color-stroke-focus, #3858e9 );
}

/*
 * A live editor's toolbar buttons stop looking like a screenshot: the ones
 * this script enabled take a pointer and answer a hover, and the ones it could
 * not drive stay exactly as they were.
 */
.wpds-composer[ data-wpds-live ] button:not( [ disabled ] ),
.wpds-editor[ data-wpds-live ] button:not( [ disabled ] ) {
	cursor: var( --wpds-cursor-control, pointer );
}

.wpds-composer[ data-wpds-live ] button:not( [ disabled ] ):hover,
.wpds-editor[ data-wpds-live ] button:not( [ disabled ] ):hover {
	background-color: var( --wpds-color-background-interactive-neutral-weak-active, #ededed );
}