/* quick-entry
   Component: templates/components/quick-entry.php
   Every state: /design-system/components/quick-entry

   One rounded box with the field and a round submit button inside its
   right edge. The box draws the border and the focus ring, so the field
   inside it has neither. Starting values, to be tuned by hand. */

quick-entry {
	display: grid;
	gap: 0.5rem;
	max-width: 50ch;

	/* The round button sits this far in from the box's edges. */
	--entry-inset: 0.55rem;
}

quick-entry entry-box {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: var(--control-height);
	padding-inline-start: var(--control-pad-inline);
	padding-inline-end: var(--entry-inset);
	background: var(--control-fill);
	border: var(--control-border);
	border-radius: var(--control-radius);

	/* Typing: the whole box wears the ring, not the field inside it. The
	   button keeps its own ring when it's tabbed to, so there's never two. */
	&:has(input:focus-visible) {
		outline: var(--control-focus-ring);
		outline-offset: var(--control-focus-offset);
	}

	input {
		flex: 1;
		min-width: 0;
		height: 100%;
		padding: 0;
		font: inherit;
		color: var(--ink-primary);
		background: none;
		border: 0;

		/* forms.css rings every focused field in a form; the box carries it here. */
		&:focus-visible {
			outline: none;
		}
	}

	button {
		display: grid;
		place-items: center;
		flex: none;
		aspect-ratio: 1;
		height: calc(var(--control-height) - var(--entry-inset) * 2);
		padding: 0;
		color: var(--fill-primary);
		background: var(--accent);
		border: 0;
		border-radius: 50%;
		cursor: pointer;

		/* Setup makes every svg fill its box; the arrow stays small in the circle. */
		.icon {
			width: 1em;
			height: 1em;
		}
	}
}