/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/header/commerce-search-input.css?{ versionKey }"/> */


/* COMMERCE SEARCH INPUT */

commerce-search-input {
    display: block;
    width: 100%;
}

commerce-search-input .input-container {
    height: auto !important;
}

commerce-search-input .input-wrapper {
    position: relative;
    border-top-left-radius: var(--ecomm-button-border-radius) !important;
    border-bottom-left-radius: var(--ecomm-button-border-radius)!important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    transition: box-shadow var(--ecomm-transition-box-shadow);
}

commerce-search-input .input-wrapper:has(input.search-input-with-button:focus) {
    box-shadow: var(--ecomm-button-box-shadow-focus) !important;
}

commerce-search-input .input-wrapper.active {
    box-shadow: unset !important;
}

/* INPUT */

commerce-search-input input.search-input-with-button {
    padding: 0.375rem 2rem 0.375rem 1rem !important;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 400;
    border-top-left-radius: var(--ecomm-button-border-radius) !important;
    border-bottom-left-radius: var(--ecomm-button-border-radius)!important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

@media (max-width: 767.98px) {
 
    commerce-search-input input.search-input-with-button {
        font-size: 1rem;
    }

}

commerce-search-input input.search-input-with-button::placeholder,
commerce-search-input input.search-input-with-button::-webkit-input-placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ecomm-color-form-placeholder-text);
}

/* CLEAR ICON */

commerce-search-input .input-icon-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2rem;
    padding: 0 !important;
}

commerce-search-input .input-clear-button-container {
    width: 100%;
    height: 100%;
}

commerce-search-input button.input-clear-button {
    position: relative;
    width: 100%;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: unset !important;
}

commerce-search-input button.input-clear-button lightning-icon {
    opacity: 0;
}

commerce-search-input button.input-clear-button::after {
    position: absolute;
    top: 0.375rem;
    left: 0.25rem;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34314 6.34332L11.9999 12.0001M11.9999 12.0001L17.6568 17.657M11.9999 12.0001L17.6568 6.34326M11.9999 12.0001L6.34308 17.657' stroke='%233D3D3D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    opacity: 1;
    transition: opacity 0.1s;
}

commerce-search-input button.input-clear-button:hover::after {
    opacity: 0.8;
}

/* SEARCH BUTTON */

commerce-search-input button.input-search-button {
    position: relative !important;
    display: block;
    width: 2.875rem !important;
    height: 2.25rem !important;
    padding: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--ecomm-button-border-radius) !important;
    border-bottom-right-radius: var(--ecomm-button-border-radius) !important;
}

commerce-search-input button.input-search-button::after {
    position: absolute;
    top: 0.4375rem;
    left: 0.75rem;
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    content: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.4754 15.7827L13.3607 11.7061C14.1898 10.5413 14.6197 9.07007 14.4047 7.50686C14.0362 4.87086 11.8868 2.78657 9.21531 2.54136C5.59193 2.17355 2.52127 5.23867 2.88975 8.88617C3.1354 11.5222 5.22345 13.6984 7.86422 14.0662C9.43025 14.2808 10.9042 13.8517 12.071 13.0241L16.155 17.1007C16.3392 17.2846 16.6156 17.2846 16.7998 17.1007L17.4447 16.457C17.6289 16.2731 17.6289 15.9666 17.4754 15.7827ZM4.70154 8.30371C4.70154 6.12748 6.48252 4.34971 8.66268 4.34971C10.8429 4.34971 12.6238 6.12748 12.6238 8.30371C12.6238 10.48 10.8429 12.2577 8.66268 12.2577C6.48252 12.2577 4.70154 10.5106 4.70154 8.30371Z' fill='white'/%3E%3C/svg%3E%0A");
}

commerce-search-input .input-search-button:focus {
    box-shadow: var(--ecomm-button-box-shadow-focus) !important;
}

commerce-search-input .input-search-button svg.slds-icon {
    opacity: 0;
}

/* SUGGESTIONS */

commerce-search-input commerce_search-list-box ul {
    border: 0 !important;
    box-shadow: var(--ecomm-color-box-shadow-02);
    transform: translateY(2px);
}