/* =============================================================================
   SHARED SELECT CONTROL
   =============================================================================

   The explicit .gk-select contract is used for every visible native <select>
   rendered by the public site and Forge. It owns the chevron asset, its 12px
   edge inset, and the protected text clearance. Component styles continue to
   own a select's width, height, surface, typography and focus colour.

   Do not add chevron data URLs to component stylesheets. Use .gk-select and
   set component-specific dimensions only.
   ============================================================================= */

.gk-select:not([multiple]):not([size]) {
    --gk-select-arrow-inset: var(--space-3);
    --gk-select-arrow-width: 12px;
    --gk-select-arrow-clearance: 40px;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: var(--gk-select-arrow-clearance);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238B949E' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--gk-select-arrow-inset) center;
    background-size: var(--gk-select-arrow-width) 8px;
    cursor: pointer;
}

.gk-select:not([multiple]):not([size])::-ms-expand {
    display: none;
}

.gk-select:not([multiple]):not([size]):disabled {
    cursor: not-allowed;
}