website/islands/SearchBox.css

.islands__search_box__button {
	padding: var(--_gap-half) var(--_gap);
	border: var(--_border-size) solid transparent;
	background-color: var(--_translucent);
	min-width: fit-content;
	outline: none;
	color: var(--_font-color);

	&:focus-visible {
		border: var(--_border-size) solid currentColor;
	}

	@media (width < 800px) {
		& {
			background-color: transparent;
		}

		& span {
			display: none;
		}
	}
}

.islands__search_box__dialog {
	width: var(--_wide-screen);
	height: 80%;
	overflow-y: scroll;
	border: var(--_border-size) solid currentColor;
	background: var(--_background-image) repeat top left / 800px;
	background-color: var(--_background-color);
	padding: var(--_gap);
	gap: var(--_gap);
	grid-template-rows: auto 1fr;

	&[open] {
		display: grid;
	}

	&::backdrop {
		backdrop-filter: blur(var(--_blur));
	}

	& input {
		padding: var(--_gap-half) var(--_gap);
		border: var(--_border-size) solid transparent;
		background-color: var(--_translucent);
		height: fit-content;
		outline: none;
		position: sticky;
		top: 0;

		&:focus-visible {
			border: var(--_border-size) solid currentColor;
		}
	}
}

.islands__search_box__dialog__content {
	padding: var(--_gap-half);
	width: 100%;
	height: 100%;
	text-align: left;
	text-wrap: balance;
	display: grid;
}