.search {
position: fixed;
height: 100%;
width: 100%;
z-index: 999;
background: white;
top: 0;
left: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.search__content {
width: 100%;
display: flex;
justify-content: center;
position: relative;
height: 100%;
align-items: center;
}
.search__close {
width: 1.6em;
font-size: 42px;
position: absolute;
right: 1em;
top: 1em;
will-change: transform;
transition: transform 400ms ease;
}
.search__close:hover {
transform: rotate(90deg);
}
.search__close-icon {
width: 100%;}
.search__content-1 {
width: 100%;
max-width: calc(100% - 40px);
}
.search__form {
position: relative;
}
.search__label {
display: flex;
width: 100%;
}
.search__field {
font-size: 42px;
border-radius: 2.38em; width: 100%;
padding-left: 1em;
line-height: 1;
box-shadow: 0 0 0 2px rgb(0 0 0 / 10%) inset;
padding-right: 2.2em;
outline: none;
border: none;
padding-top: .5em;
padding-bottom: .5em;
}
.search__field:focus{
box-shadow: 0 0 0 2px #51acfb inset;
}
.search__submit {
height: 100%;
right: .6em;
top: 0; width: 1.5em;
position: absolute;
display: flex;
align-items: center;
font-size: 42px; }
.search__submit-icon {
width: 100%;
}
.search__submit-icon > path {
fill: rgba(0, 0, 0, .1);
}
.search__close-icon > path {
fill: #51acfb;
}
.search {
will-change: top, opacity;
transition: 800ms top ease, 800ms opacity ease;
}
.search[data-state="expanded"][data-state-to="collapsed"],
.search[data-state="collapsed"] {
tab-index: -1;
opacity: 0;
pointer-events: none;
top: 100%;
}
.search[data-state="collapsed"] {
z-index: -1;
}
.search[data-state-to="expanded"],
.search[data-state="collapsed"][data-state-to="expanded"] {
visibility: visible;
tab-index: initial;
pointer-events: initial;
z-index: 999;
opacity: 1;
top: 0;
}