/* stylelint-disable selector-class-pattern */
.AsyncDropdown {
    .AsyncDropdown__menu {
        color: var(--rhino);
        margin-top: 0;
    }

    .AsyncDropdown__option {
        cursor: pointer;

        &--is-focused {
            background-color: var(--mouse);
        }

        & + .AsyncDropdown__option {
            border-top: 1px solid var(--mouse);
        }

        &-new {
            color: var(--bluejay);
            font-weight: 500;
        }
    }

    .AsyncDropdown__menu-list {
        padding: 10px;

        .AsyncLoader {
            padding: 0;
        }

        .LoadingIndicator {
            height: 32px;
            min-height: 0;
        }
    }

    .AsyncDropdown__control {
        border-color: var(--gray-200);
        cursor: text;
        min-height: 34px;

        &:active,
        &:hover {
            border-color: var(--gray-200);
        }
    }

    .AsyncDropdown__control--is-focused {
        border-color: var(--blue-300);
        box-shadow:
            inset 0 1px 1px var(--black-075),
            0 0 8px var(--blue-400-6);

        &:active,
        &:hover {
            border-color: var(--blue-300);
        }
    }

    .AsyncDropdown__value-container {
        font-size: 14px;
    }

    .AsyncDropdown__placeholder {
        color: var(--gray-300);
    }

    .AsyncDropdown__multi-value {
        background-color: var(--blue-300);
        border-radius: 3px;
        font-size: 14px;

        &__label {
            cursor: default;
            color: var(--white);
            font-size: 100%;
            line-height: 20px;
        }
    }

    .AsyncDropdown__multi-value__remove {
        color: var(--white);
        padding-left: 2px;

        &:active,
        &:hover {
            background-color: var(--blue-300);
            border-radius: 3px;
            color: var(--white);
        }
    }

    .AsyncDropdown__clear-indicator {
        cursor: pointer;
    }

    .AsyncMultiRemove-icon {
        cursor: pointer;
        margin-right: 2px;

        &::before {
            content: '\2715';
            font-size: 14px;
        }

        &:active,
        &:hover {
            color: var(--white);
        }
    }
    /* stylelint-disable selector-no-type,declaration-no-important  */
    .AsyncDropdown__value-container--is-multi {
        & > div:not(.AsyncDropdown__multi-value) {
            flex: 1;
        }
    }

    .AsyncDropdown__input {
        /* ARTARCH-183 We need important keyword to override ReactAutoSelect inline styles */
        display: flex !important;

        input {
            flex: 1;
        }
    }
    /* stylelint-enable selector-no-type,declaration-no-important */
}
/* stylelint-enable selector-class-pattern */