/*------------------------------------*\
    
    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__inner {
    border: 0;
    border-radius: 50px;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-secondary);
    background-color: var(--color-white);
    padding: 10px 29px;
    transition: border-radius 0.25s ease-in-out;
}

.is-open .choices__inner {
    border-radius: 50px;
}

.choices[data-type*='select-one']:before {
    content: "";
    display: block;
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: var(--color-primary);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.choices[data-type*='select-one']:after {
    content: "\e900";
    font-size: 8px;
    color: var(--color-white);
    position: absolute;
    top: 26px;
    right: 29px;
    transform: rotate(90deg);
    border: 0;
    transition: transform 0.25s ease-in-out,
                top 0.25s ease-in-out,
                right 0.25s ease-in-out;
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.choices.is-open:after {
    top: 37px;
    right: 36px;
    transform: rotate(-90deg);
}

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

.choices[data-type*='select-one'] .choices__input {
    border-radius: 0;
}

.choices[data-type*='select-one'] .choices__input:focus {
    border-bottom: 1px solid var(--color-primary);
}

.choices__list--dropdown {
    border-radius: 6px;
    border: 0;
    box-shadow: 0px 3px 20px rgba(149, 126, 104, 0.15);
    font-family: var(--font-primary);
    padding: 5px;
    transform: translateY(20px);
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out,
                transform 0.25s ease-in-out;
}

.choices__list--dropdown.is-active {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(10px);
}

.choices__list--dropdown .choices__item {
    color: var(--color-secondary);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-primary-lighter);
}