/* Soft shadow around the complete search pill on home and shared header search bars. */
body.home #home-search-group,
body #searchForm .searchbar-group {
    --mas-search-box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .16);
    --mas-search-box-focus-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 3px 8px rgba(0, 0, 0, .20);
    box-shadow: var(--mas-search-box-shadow) !important;
}

body.home #home-search-group:focus-within,
body #searchForm .searchbar-group:focus-within {
    box-shadow: var(--mas-search-box-focus-shadow) !important;
}

/* Keep the shade around the wrapper, including the search button. */
body.home #home-search-group .search-input,
body #searchForm .searchbar-group .search-input {
    box-shadow: none !important;
}

/* Dark themes use a subtle light edge and a deeper neutral shadow. */
:is(.darkmode, .dark-mode, .theme-dark) body.home #home-search-group,
body.home:is(.darkmode, .dark-mode, .theme-dark) #home-search-group,
:is(.darkmode, .dark-mode, .theme-dark) body #searchForm .searchbar-group,
body:is(.darkmode, .dark-mode, .theme-dark) #searchForm .searchbar-group {
    --mas-search-box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .34);
    --mas-search-box-focus-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .42);
}

/* Unfilled grey search action; shared header search bars also have the Option B divider. */
body.home #home-search-group,
body #searchForm .searchbar-group {
    --mas-search-action-color: #9aa0a6;
    --mas-search-clear-color: #79818d;
    --mas-search-divider-color: #dce2ea;
}

body.home #home-search-group .search-btn,
body #searchForm .searchbar-group .search-btn {
    background: transparent !important;
    color: var(--mas-search-action-color) !important;
    box-shadow: none !important;
}

body.home #home-search-group .search-btn .btn-text,
body #searchForm .searchbar-group .search-btn .btn-text,
body.home #home-search-group .search-btn svg,
body #searchForm .searchbar-group .search-btn svg {
    color: var(--mas-search-action-color) !important;
}
body.home #home-search-group .search-btn svg,
body.home #home-search-group .search-btn svg use,
body #searchForm .searchbar-group .search-btn svg,
body #searchForm .searchbar-group .search-btn svg use {
    fill: currentColor !important;
}

body #searchForm .searchbar-group .search-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--mas-search-divider-color);
    pointer-events: none;
}

body.home #home-search-group .search-input {
    padding-right: 76px !important;
}
body #searchForm .searchbar-group .search-input {
    padding-right: 116px !important;
}
body #searchForm .searchbar-group .mas-search-clear {
    position: absolute;
    right: 72px;
    top: 0;
    height: 48px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--mas-search-clear-color) !important;
    padding: 0;
    z-index: 4;
    cursor: pointer;
}
body.home #home-search-group .search-btn:focus-visible,
body #searchForm .searchbar-group .search-btn:focus-visible,
body #searchForm .searchbar-group .mas-search-clear:focus-visible {
    outline: 2px solid var(--mas-search-action-color);
    outline-offset: -4px;
    border-radius: 999px;
}

:is(.darkmode, .dark-mode, .theme-dark) body.home #home-search-group,
body.home:is(.darkmode, .dark-mode, .theme-dark) #home-search-group,
:is(.darkmode, .dark-mode, .theme-dark) body #searchForm .searchbar-group,
body:is(.darkmode, .dark-mode, .theme-dark) #searchForm .searchbar-group {
    --mas-search-action-color: #c5cbd3;
    --mas-search-clear-color: #b8c0cc;
    --mas-search-divider-color: #59616c;
}