/**
 * The header's search: a magnifier, and the panel it opens.
 *
 * Sized to match the account avatar beside it, so the corner reads as one row
 * of controls rather than as three separately styled things.
 */

.gcn-search {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.gcn-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--gcn-text-soft);
	background: var(--gcn-surface-sunken);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-pill);
	cursor: pointer;
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.gcn-search__button:hover,
.gcn-search.is-open .gcn-search__button {
	color: var(--gcn-brand-strong);
	background: var(--gcn-brand-soft);
	border-color: var(--gcn-brand-border);
}

.gcn-search__button:focus-visible,
.gcn-search__submit:focus-visible {
	outline: none;
	box-shadow: var(--gcn-ring);
}

.gcn-search__icon {
	width: 18px;
	height: 18px;
}

/* --------------------------------------------------------------------------
   The panel
   -------------------------------------------------------------------------- */

.gcn-search__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 200;
	display: grid;
	gap: var(--gcn-space-2);
	width: min(340px, calc(100vw - 2 * var(--gcn-space-3)));
	padding: var(--gcn-space-3);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-md);
	box-shadow: var(--gcn-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition:
		opacity var(--gcn-duration) var(--gcn-ease),
		transform var(--gcn-duration) var(--gcn-ease),
		visibility var(--gcn-duration) var(--gcn-ease);
}

.gcn-search.is-open .gcn-search__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.gcn-search__row {
	display: flex;
	gap: var(--gcn-space-2);
}

.gcn-search__field,
.gcn-search__type {
	width: 100%;
	min-height: 40px;
	padding: 0 var(--gcn-space-3);
	font-family: inherit;
	font-size: var(--gcn-text-base);
	color: var(--gcn-text);
	background: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-sm);
}

.gcn-search__field:focus,
.gcn-search__type:focus {
	outline: none;
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-ring);
}

.gcn-search__label {
	margin-top: var(--gcn-space-1);
	font-size: var(--gcn-text-xs);
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: var(--gcn-tracking-wide);
	text-transform: uppercase;
	color: var(--gcn-text-faint);
}

/* A chevron of its own: the panel is not inside the plugin's form styles, so
   an unadorned select does not read as one. */
.gcn-search__type {
	color: var(--gcn-text-soft);
	background-color: var(--gcn-surface-sunken);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4.5 6 8.5l4-4' stroke='%236a7481' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--gcn-space-3) center;
	background-size: 12px 12px;
	padding-right: var(--gcn-space-8);
	-webkit-appearance: none;
	appearance: none;
}

.gcn-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--gcn-brand-contrast);
	background: var(--gcn-brand);
	border: 0;
	border-radius: var(--gcn-radius-sm);
	cursor: pointer;
	transition: background-color var(--gcn-duration) var(--gcn-ease);
}

.gcn-search__submit:hover {
	background: var(--gcn-brand-strong);
}

/* --------------------------------------------------------------------------
   Small screens

   The panel is wider than the corner it hangs from, so anchoring it to the
   button ran it off the left edge of a phone. Below the tablet breakpoint it
   spans the screen instead, at the height the script measures the button at.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.gcn-search__panel {
		position: fixed;
		top: var(--gcn-search-top, 84px);
		right: var(--gcn-space-3);
		left: var(--gcn-space-3);
		width: auto;
	}
}