/*
	----------------
	- Search dialog
	----------------
*/

.ipsSearchDialog{
	width: 100%;
	height: 100%;
	border-width: 0;
	background: hsl(210 20% 8% / .5);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);

	transition-property: display, overlay, opacity;
	transition-behavior: allow-discrete;
	transition-timing-function: ease-in-out;
	transition-duration: .5s;
	opacity: 0;
}

.ipsSearchDialog:popover-open{
	opacity: 1;
	@starting-style{
		&{
			opacity: 0;
		}
	}
}
/* Polyfill */
.ipsSearchDialog[class*=":popover-open"]{
	opacity: 1;
	display: block;
}

:where([data-ips-scheme="dark"]) .ipsSearchDialog{
	background:hsl(210 10% 40% / .7);
}

.ipsSearchDialog__dismiss{
	position: fixed;
	inset: 0;
	opacity: 0;
	z-index: -1;
}

.ipsSearchDialog search{
	display: block;
	overflow: hidden;
	border-radius: var(--i-box--bo-ra);
	background: var(--i-background_1);
	box-shadow: 0 25px 50px -12px hsl(0 0% 0% / .25);
	width: calc(100vw - 2em);
	max-width: 880px;
	margin: 150px auto 0;
	
	transition-property: transform;
	transition-timing-function: ease-in-out;
	transition-duration: .5s;
	transform: translateY(-20px);
	transform-origin: 50% 0;
}

.ipsSearchDialog:popover-open search{
	transform: translateY(0px);
	@starting-style{
		&{
			transform: translateY(-20px);
		}
	}
}
/* Polyfill */
.ipsSearchDialog[class*=":popover-open"] search{
	transform: translateY(0px);
}

.ipsSearchDialog__modal{
	cursor: auto;
	--i-co: var(--i-color_root);
	display: flex;
	flex-direction: column;
	max-height: min(600px, 100vh - 2em);
	max-height: min(600px, 100dvh - 2em);
}

.ipsSearchDialog__input{
	flex: 0 0 auto;
	display: flex;
	gap: .6em;
	padding: 1.2em;
	color: var(--i-co);
}

	.ipsSearchDialog__input [type="text"]{		
		padding: .3em .6em;
		flex: 1 1 100%;
		outline: none;
		font-size: 1.3em;
		font-weight: 500;
	}

	.ipsSearchDialog__input [type="text"]::placeholder{
		color: inherit;
		opacity: .5;
	}

	.ipsSearchDialog__input button{
		flex: 0 0 auto;
	}

	.ipsSearchDialog__input button .fa-solid{
		font-size: .8em;
	}

.ipsSearchDialog__filters{
	font-size: max(12px, var(--i-font-size_-2));
	background: var(--i-background_2);
	border-top: 1px solid var(--i-background_5);
	color: var(--i-color_root);
	font-weight: 500;
}

	.ipsSearchDialog__filters select{
		padding-top: 1em;
		padding-bottom: 1em;
		background: none;
		border-radius: 0;
		outline-width: 0;
	}

	.ipsSearchDialog__filters select:is(:hover, :focus-visible){
		background: var(--i-background_1);
	}