auto-complete {
	.search {
		display: flex;
		position: relative;

		> button {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			border: none;
			background-color: transparent;
			display: grid;
			place-content: center;
		}
	}
	.components-spinner {
		overflow: visible;
		path {
			transform-origin: 50% 50% 0px;
			animation: 1.4s linear 0s infinite normal both running rotate-360;
		}
	}

	.search-results {
		&:empty {
			opacity: 0;
			margin-block: 0;
			padding-block: 0;
		}
		.nothing, .components-spinner {
			margin-inline-start: 1rem;
		}

		font-size: .875em;
		border-radius: 4px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05),
			0px 4px 8px 0px rgba(0, 0, 0, 0.2);

		max-height: 350px;
		overflow-y: auto;
		list-style: '' !important;
		display: flex;
		flex-flow: column;
		gap: 4px;
		padding-block: .5em;
		position: relative;
		z-index: 1000;

		li {
			margin:0;
			padding:0;
		}
		button {
			cursor: pointer;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
			gap: 4px;
			padding-block: .5rem;
			padding-inline: 1rem;

			border: none;
			&:not(:hover,:focus) {
				background: transparent;
			}

			.header {
				font-weight: 600;
			}

			.info {
				font-style: italic;
				padding-inline-start: 1em;
			}
		}
		[data-type="load-more"] {
			text-align: center;
			align-items: center;
			width: max-content;
			margin-inline: auto;
		}
	}

	.tag-list:not(:empty) {
		--flow-space: 1rem;
	}
}