.search-modal{
    width: 100%;
    height: 25rem;
    background-color: rgba(255, 255, 255, 0.93);
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    transition: all 250ms linear;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-modal.search-modal-closed{
    top: -50rem !important;
}
.search-modal button.close-button{
    position: absolute;
    right: 5rem;
    top: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: none;
}
.search-modal svg.close-icon{
    width: 2.5rem;
}
.search-modal svg.close-icon path{
    stroke: #646569;
}
.search-modal-wrap{
    display: flex;
    flex-flow: row wrap;
    row-gap: 1rem;
    width: 100%;
    padding-inline: 8vw;
    column-gap: 5rem;
    justify-content: center;
    align-items: center;
}

.search-modal .search-modal-wrap .search-input-wrap{
    display: grid;
    grid-template-columns: 3rem auto;
    place-items: center;
    width: calc(100% - 6.25rem);
    max-width: 50rem;
    transform: translateX(-1rem);
}
.search-modal .search-modal-wrap .search-input-wrap > * {
    grid-row: 1;
}
.search-modal .search-modal-wrap svg.search-icon{
    width: 2.5rem;
    transform: translateX(2rem);
}
.search-modal .search-modal-wrap input{
    width: 100%;
    max-width: 50rem;
    padding-left: 4.25rem;
}
.search-modal .search-modal-wrap input:active,
.search-modal .search-modal-wrap input:focus,
.search-modal .search-modal-wrap input:focus-visible{
    outline: solid 1px;
    border: solid 1px;
}
.search-modal .search-modal-wrap input::before{
    content: "";
    width: 2rem;
}
.search-modal .search-modal-wrap input,
.search-modal .search-modal-wrap .button{
    height: 5rem;
}
.search-modal .search-modal-wrap .button {
    background-color: var(--color-uw-red);
    border: 2px solid var(--color-uw-red);
    border-radius: 8px;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    text-align: center;
    min-width: 12rem;
    color: var(--color-primary-white);
    display: inline-block;
    transition: all 0.25s ease-in;
}

[data-role~=searchModalToggleButton]{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    background: none;
    transform: translateY(0.5rem);
}

[data-role~=searchModalToggleButton] svg{
    width: 2rem;
}
@media screen and (max-width: 780px){
    .search-modal-wrap{
        flex-flow: column wrap;
        padding-inline: 4vw;
    }
    
}
@media screen and (max-width: 650px){
    .search-modal button.close-button{
        right: 2.5rem;
    }
}