@use '../../../design/scss/_variables.scss' as *;

/**
 * AdPresso - Global Search Component Styles (SCSS)
 * ================================================
 *
 * Provides the styles for the global search bar and its results dropdown,
 * matching the new UI design.
 */


// --- Main Search Container in Header ---
.adpresso-global-search-container {
	position: relative;
	display: flex;
	align-items: center;

	// Search icon inside the input field
	.dashicons-search {
		position: absolute;
		font-size: 2.5em;
		left: calc($space-4 / 2.5);
		top: 50%;
		transform: translateY(-50%);
		width: auto;
		height: auto;
		color: $color-text;
		pointer-events: none;
	}

	// The search input field itself
	#adpresso-global-search-input {
		height: 2.5em;
		width: 350px;
		border: calc($border-small / 1.5) solid $color-text;
		border-radius: 999px;
		padding: $space-1 $space-4 $space-1 3em;
		transition: width 0.3s ease-in-out;
		font-size: calc(1.5em * $font-size-rate);

		&:focus {
			width: 500px;
			border-color: $color-accent;
			box-shadow: 0 0 0 1px $color-accent;
		}

		&::placeholder {
			color: $color-text;
		}
	}
}

// The dynamically created results list container
.adpresso-search-results {
	font-size: $font-size;
	position: absolute;
	top: calc(100% + 1em);
	left: 0;
	width: calc(500px - 2em);
	margin: 0;
	padding: 1em;
	list-style: none;
	background: $color-accent-superlight;
	border: $border-small solid $color-accent;
	border-radius: $radius-sm;
	z-index: 9999;
	max-height: 400px;
	overflow-y: auto;
	//display: none; // Controlled by JS

	// A single result item
	.adpresso-search-result-item {
		margin: 0;
		border-bottom: $border-small solid $color-golden-brown-bright;

		&:last-child {
			border-bottom: none;
		}

		// Link inside a result item
		a {
			display: block;
			padding: 2em;
			text-decoration: none;
			color: $color-text;
			outline: none;
		}

		&.is-active, &:hover, :focus-within {
			background-color: $color-golden-brown-very-bright;
		}

		a:focus {
			box-shadow: none;
		}

		// Title of the result
		.result-title {
			display: block;
			color: $color-text;
			margin-bottom: 1em;
		}

		// Description for settings
		.result-description {
			display: block;
			color: $color-text-grey;
			font-style: italic;
			margin-bottom: 1em;
		}

		.result-additionals {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 1em;

			.adpresso-badge {
				margin: -.4em 0;
			}
		}

		// Context/Type of the result
		.result-context {
			display: block;
		}

		// Color coding for different result types
		&.result-type--group .result-context {
			color: $color-text;
		}
		.adpresso-badge-type-ad {
			background-color: $color-text;
		}

		&.result-type--group .result-context {
			color: $color-accent;
		}
		.adpresso-badge-type-group {
			background-color: $color-accent;
		}

		&.result-type--placement .result-context {
			color: $color-primary;
		}
		.adpresso-badge-type-placement {
			background-color: $color-primary;
		}

		&.result-type--setting .result-context {
			color: $color-text-grey;
		}
		.adpresso-badge-type-setting {
			background-color: $color-text-grey;
		}

			// Special states (loading, no results, error)
		&.no-results,
		&.is-loading,
		&.is-error {
			padding: $space-4;
			font-style: italic;
			color: $color-text-light;
			cursor: default;
		}

		&.is-error {
			color: #d63638;
		}
	}
}