.docsearch-container {
	@apply relative;
}

.docsearch-wrapper {
	@apply w-full;
}

#docsearch {
	@apply w-full border-none rounded py-3 pr-4 pl-12 block appearance-none leading-normal text-sm;
	color: var(--leco-cp-theme--dark-blue);
	background-color: #ebeef0;
	min-width: 190px;

	&:focus {
		@apply border border-solid bg-white w-full rounded-t rounded-b-none;
	}

	&::placeholder {
		color: var(--leco-cp-theme--dark-blue);
		opacity: 1;
	}
}

.search-icon {
	@apply pointer-events-none absolute inset-y-0 left-0 pl-6 flex items-center;
	top: 3px;

	svg {
		@apply fill-current pointer-events-none;
		width: 0.875rem;
		height: 0.875rem;
	}
}

.search-feedback {
	@apply flex py-3 pr-4 pl-4 items-center rounded-b font-semibold;
	background-color: var(--wp--preset--color--leco-cp-primary);
	color: var(--wp--preset--color--leco-cp-primary-text);

	p {
		@apply mb-0;
	}

	&.hidden {
		display: none;
	}
}

@screen md {
	.docsearch-container {
		@apply flex flex-row-reverse;
	}

	#docsearch {
		@apply w-1/5 pl-12;

		&:focus {
			@apply pl-12;
		}

		&:focus + .search-icon {
			@apply right-auto left-0 pl-6 pr-0;
		}
	}

	.search-icon {
		@apply right-0 left-auto pl-0;
		padding-right: 10.5rem;
	}

	.flex:first-child + .phase-title {
		@apply mt-16;
	}

	.search-feedback {
		@apply pl-12;
	}
}