/* Shared dropdown affordance for every SDN application shell. */
:root {
    --sdn-dropdown-divider-color: #cbd7e1;
    --sdn-dropdown-zone-color: #f4f8fa;
    --sdn-dropdown-focus-color: var(--sdn-cyan, #087ea4);
    --sdn-dropdown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2323435d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sdn-dropdown-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23087ea4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

:where(
    select:not([multiple]):not([size]),
    select[size="1"],
    input[list],
    input[role="combobox"],
    .sdn-dropdown-control
) {
    background-image:
        var(--sdn-dropdown-chevron),
        linear-gradient(
            to left,
            var(--sdn-dropdown-zone-color) 0,
            var(--sdn-dropdown-zone-color) 2.85rem,
            var(--sdn-dropdown-divider-color) 2.85rem,
            var(--sdn-dropdown-divider-color) calc(2.85rem + 1px),
            transparent calc(2.85rem + 1px)
        ) !important;
    background-position: right 0.9rem center, center !important;
    background-repeat: no-repeat !important;
    background-size: 0.95rem 0.95rem, 100% 100% !important;
    padding-inline-end: 3.45rem !important;
}

:where(select:not([multiple]):not([size]), select[size="1"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
}

:where(input[list], input[role="combobox"], .sdn-dropdown-control) {
    cursor: text;
}

:where(
    select:not([multiple]):not([size]),
    select[size="1"],
    input[list],
    input[role="combobox"],
    .sdn-dropdown-control
):is(:hover, :focus, :focus-visible):not(:disabled) {
    --sdn-dropdown-divider-color: #8bb4c3;
    --sdn-dropdown-zone-color: #e9f4f7;
    border-color: var(--sdn-dropdown-focus-color) !important;
}

:where(input[role="combobox"][aria-expanded="true"], .sdn-dropdown-control[aria-expanded="true"]) {
    background-image:
        var(--sdn-dropdown-chevron-up),
        linear-gradient(
            to left,
            #e3f3f7 0,
            #e3f3f7 2.85rem,
            #78adbd 2.85rem,
            #78adbd calc(2.85rem + 1px),
            transparent calc(2.85rem + 1px)
        ) !important;
}

:where(
    select:not([multiple]):not([size]),
    select[size="1"],
    input[list],
    input[role="combobox"],
    .sdn-dropdown-control
):disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

input[list]::-webkit-calendar-picker-indicator {
    width: 2.4rem;
    height: 100%;
    margin-inline-end: -0.7rem;
    cursor: pointer;
    opacity: 0;
}

/* Searchable Pump Costing pickers keep both the search and dropdown cues. */
input.sdn-searchable-picker {
    padding-inline-end: 5.3rem !important;
}

input.sdn-searchable-picker ~ i.fa-search {
    right: 3.35rem !important;
}

/* Sales customer picker keeps search, clear, and dropdown controls distinct. */
.customer-search-input-wrap .customer-search-input[role="combobox"] {
    padding-left: 36px !important;
    padding-right: 76px !important;
}

.customer-search-input-wrap .customer-search-clear {
    right: 42px;
}

/* Service uses its own explicit chevron button; avoid drawing a second one. */
.service-customer-combobox > input[role="combobox"] {
    background-image: none !important;
    padding-inline-end: 6px !important;
}

:where([dir="rtl"], html[lang="ar"]) :where(
    select:not([multiple]):not([size]),
    select[size="1"],
    input[list],
    input[role="combobox"],
    .sdn-dropdown-control
) {
    background-image:
        var(--sdn-dropdown-chevron),
        linear-gradient(
            to right,
            var(--sdn-dropdown-zone-color) 0,
            var(--sdn-dropdown-zone-color) 2.85rem,
            var(--sdn-dropdown-divider-color) 2.85rem,
            var(--sdn-dropdown-divider-color) calc(2.85rem + 1px),
            transparent calc(2.85rem + 1px)
        ) !important;
    background-position: left 0.9rem center, center !important;
}

:where([dir="rtl"], html[lang="ar"]) :where(
    input[role="combobox"][aria-expanded="true"],
    .sdn-dropdown-control[aria-expanded="true"]
) {
    background-image:
        var(--sdn-dropdown-chevron-up),
        linear-gradient(
            to right,
            #e3f3f7 0,
            #e3f3f7 2.85rem,
            #78adbd 2.85rem,
            #78adbd calc(2.85rem + 1px),
            transparent calc(2.85rem + 1px)
        ) !important;
}

:where([dir="rtl"], html[lang="ar"]) input.sdn-searchable-picker ~ i.fa-search {
    right: auto !important;
    left: 3.35rem !important;
}

:where([dir="rtl"], html[lang="ar"]) .customer-search-input-wrap > i {
    right: 12px;
    left: auto;
}

:where([dir="rtl"], html[lang="ar"]) .customer-search-input-wrap .customer-search-input[role="combobox"] {
    padding-right: 36px !important;
    padding-left: 76px !important;
}

:where([dir="rtl"], html[lang="ar"]) .customer-search-input-wrap .customer-search-clear {
    right: auto;
    left: 42px;
}

:where([dir="rtl"], html[lang="ar"]) .service-customer-combobox > input[role="combobox"] {
    background-image: none !important;
    padding-inline-end: 6px !important;
}

@media (max-width: 640px) {
    :where(
        select:not([multiple]):not([size]),
        select[size="1"],
        input[list],
        input[role="combobox"],
        .sdn-dropdown-control
    ) {
        min-height: 44px;
    }
}