#page-title{
    background:var(--background);
    color:var(--foreground);
}

#page-search-wrapper{
    display:flex;
    align-items:center;
    justify-content:end;
}

#page-search-container {
    display:flex;
    align-items:center;
    border:1px solid var(--foreground);
    border-radius:6px;
    background:transparent;
    padding:0;
    height:42px;
    line-height:42px;
    transition:background 0.15s ease;
}

#page-search-input {
    width:0;
    border:none;
    background:transparent;
    outline:none;
    padding:0;
    font-size:16px;
    color:var(--foreground);
    transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s;
}

#page-search-container.active #page-search-input {
    width:280px;
    padding-left:12px;
}

#page-search-btn {
    background:none;
    border:none;
    cursor:pointer;
    padding:0 0.5rem;
    min-width:42px;
    height:inherit;
    line-height:inherit;
    text-align:center;
    i {
        display:inline-block;
        height:inherit;
        line-height:inherit;
        font-size:24px;
        line-height:39px;
        margin-top:3px;
        color:var(--foreground);
    }
}