/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/commerce-search-input.css?{ versionKey }"/> */
/* 
    This component is used on the "Header" components
*/

/* COMMERCE SEARCH INPUT */

commerce-search-input {
    --ecomm-commerce-search-input-max-width: 702px;
    --ecomm-commerce-search-input-border-radius: 36px;
    --ecomm-commerce-search-input-color-text: var(--ecomm-color-black-01);
    --ecomm-commerce-search-input-color-text-placeholder: var(--ecomm-color-gray-05);
    --ecomm-commerce-search-input-color-border: var(--ecomm-color-black-02);
    --ecomm-commerce-search-input-color-background: var(--ecomm-color-white-01);
    --ecomm-commerce-search-input-box-shadow-focus:
        -2px -2px 0px 0px var(--ecomm-color-white-05),
        2px -2px 0px 0px var(--ecomm-color-white-05),
        2px 2px 0px 0px var(--ecomm-color-white-05),
        -2px 2px 0px 0px var(--ecomm-color-white-05);
    --ecomm-commerce-search-input-clear-icon: 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='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --ecomm-commerce-search-input-button-color-border: var(--ecomm-color-black-02);
    --ecomm-commerce-search-input-button-color-background: var(--ecomm-color-black-02);
    --ecomm-commerce-search-input-search-icon: 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");
    --ecomm-commerce-search-input-dropdown-border-radius: 0.5rem;
    --ecomm-commerce-search-input-dropdown-box-shadow: 0px 4px 8px 0px rgba(99, 27, 6, 0.20);

    display: block;
    width: 100%;
    max-width: var(--ecomm-commerce-search-input-max-width, 100%);
}

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

commerce-search-input .input-wrapper {
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !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;
    color: var(--ecomm-commerce-search-input-color-text, var(--dxp-g-root-contrast)) !important;
    border-top-left-radius: var(--ecomm-commerce-search-input-border-radius, 0) !important;
    border-bottom-left-radius: var(--ecomm-commerce-search-input-border-radius, 0) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 1px solid var(--ecomm-commerce-search-input-color-border, var(--dxp-g-brand)) !important;
    border-right: 0 !important;
    background-color: var(--ecomm-commerce-search-input-color-background, var(--dxp-g-root)) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

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

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-commerce-search-input-color-text-placeholder, var(--b2b-search-color-text-placeholder));
}

/* 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: var(--ecomm-commerce-search-input-clear-icon);
    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-color: var(--ecomm-commerce-search-input-button-color-border, var(--dxp-g-brand)) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--ecomm-commerce-search-input-border-radius, 0) !important;
    border-bottom-right-radius: var(--ecomm-commerce-search-input-border-radius, 0) !important;
    background-color: var(--ecomm-commerce-search-input-button-color-background, var(--dxp-g-brand)) !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: var(--ecomm-commerce-search-input-search-icon);
}

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

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

/* SUGGESTIONS */

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