/*------------------------------------*\
    
    WebFX Choices.js Customizations - Global styling for select box/text inputs using Choices.js

    Add custom Choices.js select input styling to this file if it should be applied to all Choices.js select inputs on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/


/**
 * Match the plain form controls
 *
 * Choices.js swaps every <select> for its own markup, so the box it renders needs the same
 * treatment as the inputs in forms.css. Without this, selects keep the library's grey fill and 1px
 * border while the inputs around them are borderless.
 */
.choices__inner {
    min-height: 0;
    padding: var(--form-control-padding);
    border: 0;
    border-radius: var(--form-control-radius);
    background-color: var(--form-control-background);
    font: inherit;
}

/* Mirrors the input focus ring, since the real <select> is hidden and can't show its own */
.choices.is-focused .choices__inner {
    background-color: var(--form-control-background-focus);
    outline: var(--form-focus-ring-width) solid var(--form-focus-ring-color);
    outline-offset: 2px;
}