#search-toggle {
    position: fixed;
    z-index: 1010;
    width: var(--fixed-button-size);
    height: var(--fixed-button-size);
    bottom: var(--fixed-button-padding);
    right: calc(var(--fixed-button-size) + var(--fixed-button-padding));
    background-image: url('/media/svg/magnifying-glass-6-w.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    cursor: pointer;
    /* display: none; */
    display: block;
}
.viewing-search #search-toggle {
    /* pointer-events: none; */
    opacity: .5;
}
/* .viewing-search #search-toggle:hover {
    opacity: 1;
} */
[system="default"] #search-toggle {
    background-image: url('/media/svg/magnifying-glass-6-k.svg');
}
[system].viewing-search #search-toggle {
    background-image: url('/media/svg/magnifying-glass-6-w.svg');
}
#search {
    position: absolute;
    z-index: 1005;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    font-family: var(--body-text-font);
    opacity: 0;
    pointer-events: none;
    background-color: var(--background-color);
}
.viewing-search #search {
    /* position: fixed; */
    opacity: 1;
    pointer-events: auto;
    transition: opacity 500ms ease;
}
#search .input-wrapper {
    flex: 1;
    position: relative;
}

#search input[name="q"] {
    border-bottom: 4px solid;
    line-height: 1.5;
    width: 0px;
    max-width: none;
    float: right;
}
.viewing-search #search input[name="q"] {
    width: 100%;
    transition: width .25s;
}
#search-close {
    width: 120px;
    height: 120px;
    top: 0px;
    left: 0px;
    background-image: url('/media/svg/x-6-w.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
#search-form {
    display: flex;
    position: absolute;
    align-items: center;
    bottom: 30px;
    left: 0px;
    width: calc( 100vw - var(--fixed-button-size) * 2 - var(--fixed-button-padding));
    max-width: 100%;
    padding-left: 30px;
}
#search-submit {
    width: 80px;
    height: var(--fixed-button-size);
    flex: 0 0 80px;
    background-image: url('/media/svg/arrow-right-3-w.svg');
    background-size: 72px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    margin-left: 30px;
}
.searching-message-container {
    position: fixed;
    width: 100vw;
    max-width: 100%;
    height: 100dvh;
    z-index: 1020;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
}
.searching-message {
    position: relative;
    
    
    
    
}
.searching-message-dots {
    position: absolute;
    right: 0;
    transform: translate(100%, 0);
    top: 0;
}
#search[data-status="1"] .searching-message-container {
    opacity: 1;
    transition: opacity .25s;
    pointer-events: auto;
}
@media screen and (max-width: 800px) {
    #search {
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    #search-form {
        /* flex-direction: column; */
        position: relative;
        bottom: auto;
        width: auto;
        flex: 1;
        padding-right: 30px;
        /* flex-wrap: wrap; */
    }
    #search-submit {
        /* min-width: 0; */
        /* position: static; */
        height: 40px;
        background-size: 40px;
        /* width: auto; */
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: end;
        margin-left: 0; 
        margin-right: 0;
        margin-top: 0;
    }
}
@media screen and (max-width: 500px) {
    
    
}
@media (hover:hover) {
    .viewing-search #search-toggle:hover {
        opacity: 1;
    }
}