[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	appearance: none;
}

[type="search"]::-ms-clear,
[type="search"]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

.search {
	margin: 1rem 0;
	position: relative;
}

.search__input-wrapper,
.search__inner-input-wrapper {
	position: relative;
}

.search__clear-btn {
	color: var(--body-text-color);
	position: absolute;
	display: flex;
	top: 25%;
	offset-block-start: 25%;
	transform: translateY(-25%);
	right: 1rem;
	offset-inline-end: 1.5rem;
	z-index: 3;
	padding: 0;

	svg {
		color: inherit;
		width: 1rem;
		height: 1rem;
		border: 1px solid;
		border-radius: 50%;
	}
}

.search__input {
	padding-left: 2.5rem;
	padding-inline-start: 2.5rem;
	outline-offset: 1px;
	width: 100%;
	padding-right: 2.5rem;
	padding-inline-end: 2.5rem;
}

.search__icon {
	color: var(--body-text-color);
	position: absolute;
	display: block;
	top: 0.75rem;
	left: 0.75rem;
	offset-inline-start: 0.75rem;
	z-index: 3;
}

.search__inner-input-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.search_powered-by-wrapper {
	text-decoration: none;

	.search__powered-by {
		display: flex;
		padding: 10px 6px 0 0;
		align-items: center;

		.powered_by-text {
			color: var(--body-text-color);
			margin-right: 5px;
			margin-top: -2px;
		}

		.algolia-logo {
			fill: var(--body-text-color);
		}
	}
}

/* search results */
.search .search-results {
	font-size: 0.875rem;
	background-color: var(--body-background-color);
	z-index: 10;
	width: 100%;
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	border: 1px solid var(--divider-color);
	position: absolute;
	top: calc(100% - 1.5rem);
	max-height: 400px;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);

	&[data-results="true"] {
		padding: 0;
	}

	&[data-results="false"] {
		padding: 1rem;
	}

	&:empty {
		display: none;
	}
}

.search-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.search .search-results__item {
	margin: 0;
	padding: 0.875rem;
	border-bottom: 1px solid var(--lightest-background-color);
	border-block-end: 1px solid var(--lightest-background-color);
	position: relative;

	&:hover {
		background-color: var(--lightest-background-color);
	}

	&:focus-within {
		background-color: var(--lightest-background-color);
	}
}

.search .search-results__item__title {
	font-size: var(--step-0);
	font-size: 0.875rem;
	margin-bottom: 0;
	font-family: var(--text-font);

	a {
		display: block;
		text-decoration: none;
		color: var(--link-color);
		font: inherit;
		padding: 0.25rem 0.75rem;

		&:hover {
			background-color: inherit;
			color: var(--link-color);
		}

		&::after {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			content: "";
		}
	}
}

.search-results__item__context {
	margin: 0;
	font-size: 0.875rem;
	padding-left: 1rem;
}

.algolia-docsearch-suggestion--highlight {
	background-color: var(--color-brand);
	color: #fff;
	display: inline-block;
	padding: 0 2px;
	border-radius: 2px;

	[data-theme="dark"] & {
		background-color: var(--link-color);
		color: var(--color-neutral-900);
	}
}
