// ============================================================================
// Components | Search Box
// ============================================================================

@use "../../dev" as *;
@use "../../variables" as *;

@use "../head_layout" as *;

@use "../soul_type" as *;

/// Input types styling.
/// Customizes specific input types for better consistency across browsers.
/// @group Form
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto; // Corrects the cursor style of increment and decrement buttons in Chrome
}

[type="search"] {
    -webkit-appearance: textfield; // Corrects the odd appearance in Chrome and Safari
    outline-offset: -q(2); // Corrects the outline style in Safari
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; // Removes the inner padding in Chrome and Safari on macOS
}

// /* search box */
// .search-box .add-on .input-group-append > .btn, .search-box .add-on .input-group-btn > .btn {left:0px; border-color:#ededed; @include shadow--none; -moz-@include shadow--none; -webkit-@include shadow--none; -o-@include shadow--none; -ms-@include shadow--none; margin-right: 0; margin-left: -q(1); text-transform: uppercase; border-width: q(1); border-style: solid;padding: q(5) q(8); height: 3q(1); border-top-right-radius: q(4); border-bottom-right-radius: q(4); border-left: 0;}
// .search-box .add-on .form-control:focus, .search-box .add-on .input-group-btn > .btn:focus, .search-box .add-on .input-group-btn > .btn:hover {box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; border-color:#ededed; background: #f7f7f7}
// .search-box .add-on i{color: #939393; font-size: q(12); top: -q(4); left: -q(2)}
// .sidebar-nav-style-1 .search-box .add-on i{top: -q(4);}
// .search-box input[type="text"],.search-box input[type="search"]{border-color:#ededed; @include shadow--none; -moz-@include shadow--none; -webkit-@include shadow--none; -o-@include shadow--none; -ms-@include shadow--none; font-size: q(12); font-weight: normal; color: #232323; height: 3q(1);}
// .search-box .add-on input[type="text"]{padding: q(5) q(8)}
// .search-box input[type="text"]::-webkit-input-placeholder {color: #939393; font-size: q(10); text-transform: uppercase; font-weight: 400; letter-spacing: 0.015em;}
// .search-box input[type="text"]::-moz-placeholder {color: #939393; font-size: q(10); text-transform: uppercase; font-weight: 400; letter-spacing: 0.015em}
// .search-box input[type="text"]::-ms-input-placeholder {color: #939393; font-size: q(10); text-transform: uppercase; font-weight: 400; letter-spacing: 0.015em}
// .search-box input[type="text"]::-o-placeholder {color: #939393; font-size: q(10); text-transform: uppercase; font-weight: 400; letter-spacing: 0.015em;}

// /* search box style 2 */
// .search-box2 .add-on .input-group-append > .btn {border-left-width:0; left:0px; border-color:#4f4f4f; background-color: #4f4f4f; @include shadow--none; -moz-@include shadow--none; -webkit-@include shadow--none; -o-@include shadow--none; -ms-@include shadow--none; margin-right: 0;margin-left: -q(1); text-transform: uppercase; border-width: q(1); border-style: solid; padding: q(5) q(8) q(5) q(10); height: 4q(4); width: 4q(4);}
// .search-box2 .add-on .input-group-append {width: 4q(4);}
// .search-box2 .add-on .input-group-append > .btn:focus, .search-box2 .add-on .input-group-append > .btn:hover {box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; border-color:#4f4f4f; background-color: #4f4f4f;}
// .search-box2 .add-on i{color: var(--color_surface_primary); font-size: 1q(8)}
// .search-box2 input[type="email"],.search-box2 input[type="search"]{border-color:#474747; background-color: transparent; @include shadow--none; -moz-@include shadow--none; -webkit-@include shadow--none; -o-@include shadow--none; -ms-@include shadow--none;font-size: q(14); font-weight: normal; color: #636363; height: 4q(4)}
// .search-box2 .add-on input[type="email"]{padding: q(10) q(14)}
// .search-box2 input[type="email"]::-webkit-input-placeholder {color: #636363; font-size: q(14); font-weight: 400; letter-spacing: 0.015em; background-color: transparent;}
// .search-box2 input[type="email"]::-moz-placeholder {color: #636363; font-size: q(14); font-weight: 400; letter-spacing: 0.015em; background-color: transparent;}
// .search-box2 input[type="email"]::-ms-input-placeholder {color: #636363; font-size: q(14); font-weight: 400; letter-spacing: 0.015em; background-color: transparent;}
// .search-box2 input[type="email"]::-o-placeholder {color: #636363; font-size: q(14); font-weight: 400; letter-spacing: 0.015em; background-color: transparent;}

// /* search form */
// .search-cart-header {padding-top: q(14); float: right; letter-spacing: q(1)}
// .header-search-form {color: #232323}
// .search-form .search-input {border: none; border-radius: 0; border-bottom: q(2) solid rgba(255,255,255,0.5); font-size: q(32); font-weight: 100; padding: q(20) 3q(8) q(20) q(2); text-transform: capitalize; background: transparent; line-height: q(140); color: var(--color_surface_primary);}
// .search-form .search-input:focus{outline: none}
// .search-form .search-input.required-error {border: none !important; border-bottom: q(2) solid #ff0000 !important;}
// .search-input ::-moz-placeholder, .search-input [placeholder] {color: #ff0000;}
// .search-form .search-button {font-size:2q(1); color:var(--color_surface_primary); top:3q(1); right: 0; outline: none;}
// #search-header {height:100%; width: 45%; margin:0 auto;}
// .close-search {color: #373737; position: absolute; right: 0; top: 2q(4); z-index: 998; cursor: pointer;}
// .close-search:hover {color: #9a9a9a;}
// .search-button {cursor: pointer;  z-index: 0; margin-right: 0; border: none; background: none;}
// aside .search-button {border: q(2) solid transparent;}