/***********************************
* Search
***********************************/
.twc-search {
    --width-button:39px;
    --width-input:210px;
    --width-text:77px;
    --spacing-left:35px;
    margin-left:var(--spacing-left); padding-left:var(--spacing-left); width:calc(var(--width-text) + var(--spacing-left));
    overflow:hidden; display:flex; align-items:center;
    transition:var(--twc-transition);
}
.twc-search:before {
    content:""; display:block;
    width:1px; height:19px; background:#dbdbdb;
    position:absolute; top:50%; left:0; transform:translateY(-50%);
}

/* Button - Click */
.twc-search button.button-open {
    background:rgba(0, 0, 0, 0); color:rgba(35, 31, 32, .5); text-align:left; font-weight:400;
    position:absolute; top:50%; transform:translateY(-50%); left:35px; z-index:2;
}
.twc-search button.button-open .search {font-size:var(--twc-size-13);}
.twc-search button.button-open .text {padding-left:15px; font-size:var(--twc-size-15);}
.twc-search button.button-open .close {
    pointer-events:none; opacity:0; display:block; font-size:10px;
    position:absolute; top:55%; transform:translateY(-50%); left:5px;
    transition:var(--twc-transition);
}
.twc-search button.button-open:hover {color:var(--twc-color-primary);}

/* Input */
.twc-search-form {
    z-index:1;
    width:var(--width-input); transform:translateX(var(--width-text));
}
.twc-search-form input {
    display:block;
    width:var(--width-input); height:34px;
    background:#f6f6f6; color:#000; font-size:var(--twc-size-16); font-family:inherit;
    padding:5px calc(20px + var(--width-button)) 5px 25px;
    -webkit-appearance:none !important; -webkit-border-radius:0 !important;
    transition:var(--twc-transition);
}
.twc-search-form input::placeholder {
    color:rgba(0, 0, 0, .5); font-size:var(--twc-size-14);font-weight:400;
    transition:var(--twc-transition);
}
.twc-search-form input[type="search" i]::-webkit-search-cancel-button {display:none;}
.twc-search-form button.search-submit {
    position:absolute; right:0; top:0;
    width:var(--width-button); height:100%; background:var(--twc-color-primary);
    display:flex; align-items:center; justify-content:center;
    color:var(--twc-color-white); font-size:var(--twc-size-15);
}
.twc-search-form button.search-submit:hover, .twc-search-form button.search-submit:focus,
.twc-search-form button.search-submit:focus-visible {background:var(--twc-color-secondary);}
.twc-search-form input:hover::placeholder,
.twc-search-form input:focus::placeholder {color:rgba(0, 0, 0, .2);}

/*open search*/
.open_search .twc-search {width:calc(var(--width-input) + 35px);}
.open_search .twc-search-form {transform:translateY(0);}
.open_search .twc-search button.button-open {width:10px;}

/* Hide search visible */
.open_search .twc-search button.button-open span:not(.close) {pointer-events:none; opacity:0;}
.open_search .twc-search:hover button.button-open span.close {opacity:1;}
.open_search .twc-search button.button-open:focus-visible span.close {opacity:1; left:0;}


/***********************************
* Search - Responsive
***********************************/
@media only screen and (max-width:1439px) {
    .twc-search {--spacing-left:30px; --width-text:82px;}
}
@media only screen and (max-width:1180px) {
    .twc-search {
        --spacing-left:0px;
        --width-text:var(--width-input);
        --width-button:40px;
    }
    .twc-search:before {display:none;}
    .twc-search-form {transform:translateY(0);}
    .twc-search-form input {height:var(--width-button); padding-left:20px;}
}

@media only screen and (max-width:480px) {
    /*search form*/
    .twc-search {
        --width-input:100%;
    }
}