app-module-search {
    position: absolute;
    width: 100%; height: 100%;
}

app-module-search div.border {
    position: absolute;
    box-sizing: border-box;
    left: 1.6rem; right: 1.6rem; height: 7rem;
    top: 50%; transform: translateY(-50%);
    border-radius: 1.8rem;
    background: linear-gradient(90deg, rgba(94, 189, 243, 1) 0%, rgba(129, 96, 164, 1) 16.6%, rgba(210, 74, 67, 1) 33.2%, rgba(225, 140, 68, 1) 49.8%, rgba(255, 243, 67, 1) 66.4%, rgba(137, 191, 121, 1) 83.4%, rgba(75, 121, 187, 1) 100%);
    transition: right var(--anim-duration);
    transition-delay: 0.15s;
    z-index: 10;
}

app-module-search div.border input {
    position: relative;
    box-sizing: border-box;
    width: 100%; height: 100%;
    appearance: none;
    border: 0.8rem solid transparent;
    background-clip: padding-box;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.2rem;
    padding: 1.3rem; padding-left: 5rem;
    border-radius: 1.8rem;
    transition: right var(--anim-duration), border var(--anim-duration);
    outline: none;
}

app-module-search div.border::before {
    content: '';
    position: absolute;
    left: 2rem; top: 0;
    width: 3rem; height: 100%;
    background-image: url(images/icons_input_search.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 100;
}

app-module-search div.border input:focus {
    border: 0.8rem solid var(--ui-master-color);
}

app-module-search button.search,
app-module-search button.close {
    display: block;
    position: absolute;
    box-sizing: border-box;
    right: 1.6rem; width: 7rem; height: 7rem;
    top: 50%; transform: translateY(-50%) scale(0.1);
    background-color: var(--ui-master-color);
    border-radius: 1.8rem; border: 0;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: right var(--anim-duration), opacity var(--anim-duration), transform var(--anim-duration);
}

app-module-search button.search {
    right: 9.6rem; 
}

app-module-search button.search svg,
app-module-search button.close svg {
    vertical-align: middle;
}

body.kwords app-module-search button.close,
body.items app-module-search button.close {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-50%) scale(1.0);
}

body.kwords app-module-search div.border,
body.items app-module-search div.border { right: 9.6rem }

body.search_btn app-module-search button.search {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-50%) scale(1.0);
}

body.search_btn app-module-search div.border { right: 17.6rem }


body.search_btn app-module-search button.search:active,
app-module-search button.close:active {
    transform: translateY(-50%) scale(0.9);
}