search-able {
	display: block;

	& .search-field {
		display: flex;
		align-items: center;
		gap: .125rem;
		padding: 0 1rem;

		color: var(--color-accent);
        caret-color: var(--color-accent);
        font-style: italic;
        background-color: var(--color-bg-primary);

		border: solid var(--color-accent);
		border-width: 1px;

		& .svg-icon {
			--size: 1rem;
			flex-shrink: 0;
		}

		&:focus, &:focus-within {
        	color: unset;
			border-color: var(--color-text);
		}

		&:has(input:focus-visible) {
			outline: .25em solid var(--color-text);
			outline-offset: .3em;
			border-radius: 2px;
		}

		& input {
			flex-grow: 1;
			padding: .5rem;
			background: none;
			border: none;
			max-width: 100%;
			height: 100%;

			&:where(:focus, :focus-within), &:focus-visible {
				outline: none;
				border: none;
			}
		}

		& button {
			color: inherit;
			border: 1px solid transparent;
			background: none;
			padding: .25rem;

			&:where(:hover, :focus, :focus-visible) {
				border-color: currentColor;
			}
		}
	}
}