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

    .AsyncDropdown__option {
        cursor: pointer;

        &--is-focused {
            background-color: $mouse;
        }

        & + .AsyncDropdown__option {
            border-top: 1px solid $mouse;
        }

        &-new {
            color: $bluejay;
            font-weight: 500;
        }
    }

    .AsyncDropdown__menu-list {
        padding: 10px;

        .AsyncLoader {
            padding: 0;
        }

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

    .AsyncDropdown__control {
        border-color: $grey_200;
        cursor: text;
        min-height: 34px;

        &:active,
        &:hover {
            border-color: $grey_200;
        }
    }

    .AsyncDropdown__control--is-focused {
        border-color: $blue_300;
        box-shadow: inset 0 1px 1px $black_075, 0 0 8px $blue_400_6;

        &:active,
        &:hover {
            border-color: $blue_300;
        }
    }

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

    .AsyncDropdown__placeholder {
        color: $grey_300;
    }

    .AsyncDropdown__multi-value {
        background-color: $blue_300;
        border-radius: 3px;
        font-size: 14px;

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

    .AsyncDropdown__multi-value__remove {
        color: $white;
        padding-left: 2px;

        &:active,
        &:hover {
            background-color: $blue_300;
            border-radius: 3px;
            color: $white;
        }
    }

    .AsyncDropdown__clear-indicator {
        cursor: pointer;
    }

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

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

        &:active,
        &:hover {
            color: $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 */