.searchcollapse{
	position: relative;
	display: flex;

	@media (max-width: 991px){
		flex-grow: 1;

		button[type=button]{
			display: none !important;
		}
	}

	button{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 45px;
		height: 45px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--wp--preset--color--gray-80);
		transition: color .3s ease;

		&:hover{
			color: var(--wp--preset--color--orange);
		}

		&::before{
			--icon: url(../../images/search.svg);
			content: '';
			width: 19px;
			aspect-ratio: 1;
			-webkit-mask: var(--icon) no-repeat center/contain;
			mask: var(--icon) no-repeat center/contain;
			background: currentColor;
			transition: background-color .3s ease;
		}
	}

	form{
		@media (min-width: 992px){
			pointer-events: none;
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			opacity: 0;
			transform: scale(0.9);
			transform-origin: right center;
			transition: all .15s ease;
			transition-property: opacity, transform;
		}

		@media (max-width: 991px){
			width: 100%;
		}

		input{
			width: 414px;
			height: 45px;
			padding: 12px 50px 12px 16px;
			background: var(--wp--preset--color--gray-2);
			border: 0;
			font-size: 16px;

			@media (max-width: 991px){
				width: 100%;
			}

			&:focus{
				outline: none;
			}
		}

		button{
			position: absolute;
			z-index: 1;
			top: 0;
			right: 0;
			color: var(--wp--preset--color--orange);
		}
	}

	&.opened form{
		pointer-events: auto;
		opacity: 1;
		transform: scale(1);
	}
}