/* NATIVE FORM FIELDS */
.form-field {
    border-radius: 11px;
    background: var(--chakra-colors-bg-subtle);
    color: var(--chakra-colors-fg);
    border: 1px solid var(--chakra-colors-border-default);
    transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.2s ease;
}

.form-field::placeholder {
    color: var(--chakra-colors-fg-muted);
}

.form-field:hover {
    border-color: var(--chakra-colors-primary-500);
}

.form-field:focus {
    background: var(--chakra-colors-bg-contrast);
    border-color: var(--chakra-colors-brand-accent);
    box-shadow: 0 0 0 1px var(--chakra-colors-brand-accent);
    outline: none;
}


/* REACT SELECT*/

.form-select__control {
    border-radius: 11px !important;
    background: var(--chakra-colors-bg-subtle) !important;
    color: var(--chakra-colors-fg) !important;
    border: 1px solid var(--chakra-colors-border-default) !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    font-size: 14px;
    padding: 4px;
}

/* Same as .form-field:hover */
.form-select__control:hover {
    border-color: var(--chakra-colors-primary-500) !important;
}

/* Same as .form-field:focus */
.form-select__control--is-focused {
    background: var(--chakra-colors-bg-contrast) !important;
    border-color: var(--chakra-colors-brand-accent) !important;
    box-shadow: 0 0 0 1px var(--chakra-colors-brand-accent) !important;
}


/* REACT SELECT TEXT / INPUT */
.form-select__single-value {
    color: var(--chakra-colors-fg) !important;
}

.form-select__input-container {
    color: var(--chakra-colors-fg) !important;
}

.form-select__input {
    color: var(--chakra-colors-fg) !important;
}

.form-select__placeholder {
    color: #8a8a8a !important;
}


/* REACT SELECT OPTIONS / MENU */
.form-select__menu {
    margin-top: 5px !important;
    border-radius: 10px !important;
    overflow: hidden;
    z-index: 999999 !important;
    background-color: var(--chakra-colors-bg-panel) !important;
    border: 1px solid var(--chakra-colors-border-default);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.form-select__menu-list {
    padding: 6px !important;
    background-color: var(--chakra-colors-bg-panel) !important;
}

.form-select__option {
    padding: 10px 12px !important;
    border-radius: 7px !important;
    margin-bottom: 2px;
    cursor: pointer;
    transition: background-color 0.12s ease,
    color 0.12s ease;
    background-color: transparent;
    color: var(--chakra-colors-fg);
}

.form-select__option--is-selected {
    background-color: var(--chakra-colors-primary-600) !important;
    color: white !important;
}

.form-select__option--is-focused {
    background-color: var(--chakra-colors-bg-emphasized) !important;
    color: var(--chakra-colors-fg) !important;
}

.form-select__option--is-selected.form-select__option--is-focused {
    background-color: var(--chakra-colors-primary-600) !important;
    color: white !important;
}

.form-select__option--is-selected:active {
    background-color: var(--chakra-colors-primary-600) !important;
}


/* MULTI VALUE */

.form-select__multi-value {
    border-radius: 6px !important;
    background-color: var(--chakra-colors-primary-50) !important;
    border: 1px solid var(--chakra-colors-primary-100);
}

.form-select__multi-value__label {
    color: var(--chakra-colors-primary-700) !important;
    font-size: 13px;
    font-weight: 600;
}

.form-select__multi-value__remove {
    color: var(--chakra-colors-primary-600) !important;
    border-radius: 0 6px 6px 0;
}

.form-select__multi-value__remove:hover {
    background-color: var(--chakra-colors-primary-600) !important;
    color: white !important;
}


/*OTHER REACT SELECT ELEMENTS */

.form-select__no-options-message {
    color: var(--chakra-colors-fg-muted) !important;
}

.form-select__indicator-separator {
    background-color: var(--chakra-colors-border-default) !important;
}

.form-select__dropdown-indicator {
    color: var(--chakra-colors-fg-muted) !important;
}

.form-select__dropdown-indicator:hover {
    color: var(--chakra-colors-primary-500) !important;
}