.search-box {

}
.search-container {
	--margin-top: 16px;
	--margin-left: 16px;
	--margin-right: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	background-color: #f0f1fd;
	--border: 2px solid red;
	border-radius: 5px;
	position: relative;
	transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
	margin-bottom: 16px;

	.toggle-icon {
		position: absolute;
		top: 2px;
		right: 2px;
		cursor: pointer;
		width: 16px;
		height: 16px;
		border: none;
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6.364 13.5a.5.5 0 0 0 .5.5H13.5a1.5 1.5 0 0 0 1.5-1.5v-10A1.5 1.5 0 0 0 13.5 1h-10A1.5 1.5 0 0 0 2 2.5v6.636a.5.5 0 1 0 1 0V2.5a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H6.864a.5.5 0 0 0-.5.5"/><path fill-rule="evenodd" d="M11 5.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793l-8.147 8.146a.5.5 0 0 0 .708.708L10 6.707V10.5a.5.5 0 0 0 1 0z"/></svg>');
		animation: rotate-out 0.3s ease-in-out forwards;
	}

	.search-content {
		width: 100%;
	}
}

.search-container.collapse {
	--width: 16px;
	height: 0;
	padding: 0;
	--overflow: hidden;
	top: -32px;
	--right: 0px;
	background-color: unset;
	--z-index: 1;
	margin-bottom: 0;

	.search-content {
		display: none;
	}

	.toggle-icon {
		right: -32px;
		--top: -4px;
		--width: 0;
		--height: 0;
		--transition: right 0.3s ease-in-out;
		transform: rotate(180deg);
		animation: rotate-in 0.3s ease-in-out forwards;
		--background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="darkgray" class="bi bi-box-arrow-in-down-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M9.636 2.5a.5.5 0 0 0-.5-.5H2.5A1.5 1.5 0 0 0 1 3.5v10A1.5 1.5 0 0 0 2.5 15h10a1.5 1.5 0 0 0 1.5-1.5V6.864a.5.5 0 0 0-1 0V13.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M5 10.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H6.707l8.147-8.146a.5.5 0 0 0-.708-.708L6 9.293V5.5a.5.5 0 0 0-1 0z"/></svg>');
	}
}

@keyframes rotate-in {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(180deg);
	}
}

@keyframes rotate-out {
	from {
		transform: rotate(180deg);
	}
	to {
		transform: rotate(0deg);
	}
}

.search-content {
	display: flex;
	gap: 16px;
	label {
		font-weight: normal;
	}

	input {
		outline: none;
		border-radius: 4px;
		--width: 400px;
		height: 26px;
		border: 1px solid #b1b2c8;
		padding: 0 4px;
		--margin-top: 8px;
		color: #666;
	}

	input:focus {
		border-color: dodgerblue;
	}

	input[type=date] {
		width: 130px;
	}

	button {
		--width: 80px;
		cursor: pointer;
		width: auto;
		--border-radius: 4px;
	}
}