/*------------------------------------*\
    
    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

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

.choices {
    color: #000;
    font-size: 16px;
}

.choices__inner {
    padding: 8.5px 15px 8.5px;
    border-radius: 10px;
    border: 1px solid #D8D8D8;
    background: var(--color-bg-white);
    font-size: 16px;
}

.choices[data-type*='select-one']:after {
        content: '\e900';
        font-family: 'lyon-icon';
        border: none;
        width: auto;
        height: auto;
        margin-top: 0;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        color: var(--color-link-hover);
        font-size: 12px;
}

.choices[data-type*='select-one'].is-open:after {
    content: '\e903';
    margin-top: 0;
}

.choices[data-type*='select-one'] .choices__input {
    outline: none;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    margin: 0 0 10px;
    width: calc(100% - 20px);
}

.is_focused .choices__inner,
.is-open .choices__inner {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #D8D8D8;
}

.choices__list--dropdown {
    padding: 10px;
    border: 1px solid #D8D8D8;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.is-open .choices__list--dropdown {
    border: 1px solid #D8D8D8;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--color-bg-gray);
}

.choices__list--dropdown .choices__item {
    font-size: 16px;
    padding: 10px 10px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
}

.choices__list {
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
    z-index: 9;
}

/* Selected item display - single line with ellipsis */
.choices__list--single .choices__item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Webkit scrollbar styling */
.choices__list::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

.choices__list::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: var(--scrollbar-border-radius);
}

.choices__list::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-border-radius);
}

.choices__list::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover-color);
}

/* ==========================================================================
   ERROR STATE - Gravity Forms Integration
   ========================================================================== */

.gfield_error .choices__inner {
    border: 2px solid #A30F0F;
}

.gfield_error .is-open .choices__inner,
.gfield_error .is_focused .choices__inner {
    border: 2px solid #A30F0F;
}

.gfield_error .choices__list--dropdown {
    border: 2px solid #A30F0F;
    border-top: none;
}

/* Error icon for Choices.js - positioned left of caret */
.gfield_error .choices[data-type*='select-one']::before {
    content: '\e90a';
    font-family: 'lyon-icon';
    position: absolute;
    right: 45px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #A30F0F;
    font-size: 20px;
    pointer-events: none;
    z-index: 1;
}

.choices[data-type*='select-one'] .choices__inner {
    padding-bottom: 4.5px;
}