.jc--search-form {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 10;
width: auto;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: all .2s ease-in-out;
}
.jc--search-form::after {
content:"";
background-color: #FFF;
border-radius: 0 0 10px 10px;
-webkit-box-shadow: 0 0 18px 0 rgb(0 0 0 / 10%);
box-shadow: 0 0 18px 0 rgb(0 0 0 / 10%);
position:absolute;
top:0;
right:0;
bottom:18px;
left:0;
z-index:-1;
}
.is--active + .jc--search-form {
max-height:1000px;
opacity:1;
}
.jc--search-form .search-form {
padding: 20px;
max-width: 1660px;
margin: 0 auto 18px;
display: flex;
justify-content: space-between;
align-items: center;
}
.jc--search-form label {
flex-grow:1;
margin-right:1rem;
}
.jc--search-form .search-field {
width:100%;
}
.search-toggle {
font-size:1rem;
font-weight:400;
border: 0 none;
border-radius: 0;
background: transparent;
padding:26px 7px;
outline:none;
text-transform:none;
}
.search-toggle .only--desktop {
margin-right: 10px;
}
.search-toggle--icon {
display:inline-block;
width:25px;
height:16px;
position:relative;
}
.search-toggle--icon::before {
content: "";
position: absolute;
margin: auto;
right: 0;
bottom: 0;
width: 10px;
height: 2px;
border-radius: 2px;
background-color: #000;
transform: rotate(45deg);
transition:all .15s ease-in-out;
}
.search-toggle--icon::after {
content: "";
position: absolute;
margin: auto;
top: -5px;
right: 0;
bottom: 0;
left: -5px;
width: 17px;
height: 17px;
border-radius: 50%;
border: 2px solid #000;
transition:all .15s ease-in-out;
}
.is--active .search-toggle--icon::before {
right: 50%;
bottom: 50%;
width: 20px;
transform: translate(50%,50%) rotate(45deg);
}
.is--active .search-toggle--icon::after {
top: 0;
left: 0;
width: 20px;
height: 2px;
border: none;
background: #000;
border-radius: 2px;
transform: rotate(-45deg);
}
@media screen and (min-width:1200px) {
.search-toggle {
border-radius: 10px;
line-height:1.5;
padding: 7px 20px 9px;
margin: 13px 0 51px;
position:relative;
z-index:12;
}
.search-toggle.is--active {
background-color: #F5F6F8;
}
.jc--search-form .search-form {
position: relative;
padding: 40px 20px 25px;
}
}