@import '../../containers/Application/colors.scss';

$multiAutoCompleteBackgroundColor: $white;
$multiAutoCompleteBorderColor: $silver;
$multiAutoCompleteIconColor: $dustyGray;

$multiAutoCompleteDisabledColor: $gray;
$multiAutoCompleteDisabledBackgroundColor: $wildSand;

.multi-auto-complete {
    background-color: $multiAutoCompleteBackgroundColor;
    border: 1px solid $multiAutoCompleteBorderColor;
    border-radius: 3px;
    display: flex;
    align-items: center;

    .chip {
        margin: 5px 10px 5px 0;
    }

    .input {
        border: none;
        font-size: 12px;
        flex-grow: 1;
        height: 28px;
    }

    .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        flex: 0 0 32px;
        margin: 5px 10px 5px 0;
        font-size: 16px;
        color: $multiAutoCompleteIconColor;
        border-right: 1px solid $multiAutoCompleteBorderColor;
    }

    .items {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
    }

    &.disabled {
        color: $multiAutoCompleteDisabledColor;
        background-color: $multiAutoCompleteDisabledBackgroundColor;

        .input {
            color: $multiAutoCompleteDisabledColor;
            background-color: $multiAutoCompleteDisabledBackgroundColor;
        }
    }
}
