#abstracts > .multiselectautocomplete;

.multiselect-autocomplete {
    &.focused { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2); }

    .search-field {
        position         : relative;
        width            : 298px;
        min-height       : 30px;
        border-radius    : 5px;
        border-color     : #ffffff;
        background-color : #ffffff;
        font-family      : @main-font-medium;

        span { font-size: 13px; }

        .remaining-items {
            position    : absolute;
            top         : 8px;
            right       : 4px;
            font-family : @main-font-medium;
            font-size   : 13px;
            color       : #aaaaaa;

            &.hidden { display: none; }
        }

        &-container {
            .selected-item {
                .m-ellipsis;

                max-width        : 264px;
                height           : 24px;
                line-height      : 22px;
                margin           : 2px 0px 2px 4px;
                border-radius    : 12px;
                border-color     : #eeeeee;
                background-color : #eeeeee;
                color            : #333333;

                .close {
                    top   : 9px;
                    right : 6px;
                }
            }

            &.collapsed {
                height        : 28px;
                padding-right : 65px;

                .selected-item {
                    button { display: none; }

                    padding          : 0 4px 0 2px;
                    border-color     : #ffffff;
                    background-color : #ffffff;

                    span:after {
                        content   : ",";
                        position  : absolute;
                        top       : 1px;
                        right     : 0;
                        font-size : 13px;
                    }

                    &.last-in-line {
                        &:after { display: none; }

                        span:after { content: ""; }
                    }
                }
            }

            input {
                max-width : 270px;
                height    : 24px;
                font-size : 13px;
            }
        }
    }

    &-filter-dropdown {
        border-bottom-left-radius  : 5px;
        border-bottom-right-radius : 5px;
        border-color               : #ffffff;
        border-top-color           : #eeeeee;
        box-shadow                 : 0 2px 5px 0 rgba(0, 0, 0, 0.2);

        .dropdown-item {
            padding     : 10px 5px;
            border      : 0;
            font-family : @main-font-regular;
            font-size   : 13px;

            .first-line, .second-line {
                line-height : 15px;
                color       : #000000;
            }

            .first-line  { font-family: @main-font-medium; }
            .second-line { color: #444444; }

            &.hover { background-color: #f7f7f7; }
        }
    }
}