/*
 * Consistent native <select class="form-control"> across browsers.
 *
 * Bootstrap 4 / Metronic leave the browser's own select rendering in place.
 * Chrome and Firefox draw it flat, but Safari keeps its dated built-in button
 * look and ignores the pill radius. Drop the native appearance everywhere and
 * draw our own chevron so every single-value select looks the same.
 */
select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    /* No background-color here: keep whatever the context gives .form-control
       (white in regular forms, transparent in the subheader search bar). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2374788d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 12px;
    cursor: pointer;
}

select.form-control-sm:not([multiple]):not([size]) {
    padding-right: 2rem;
    background-position: right .75rem center;
}

/* Pill selects: keep the chevron clear of the rounded edge. */
select.form-control-pill:not([multiple]):not([size]) {
    padding-right: 2.75rem;
    background-position: right 1.25rem center;
}

/* Subheader search bar (market page): chevron matches the theme's #9892dc text. */
.kt-subheader-search select.form-control:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%239892dc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
}

select.form-control:disabled {
    cursor: not-allowed;
}

/* Old Edge / IE draw their own arrow on top of ours. */
select.form-control::-ms-expand {
    display: none;
}