@prefix: graphjs;

@{prefix}-autocomplete.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    .@{prefix}-content {
        .no-padding !important;
        min-width: 10em;
        min-height: 2em;
        &.@{prefix}-closable {
            .@{prefix}-input {
                .@{prefix}-symbol {
                    & + input, & + input[type] {
                        width: calc(100% - 4em);
                        min-width: 6em;
                    }
                }
                .@{prefix}-close {
                    width: 2em;
                    height: 2em;
                    &:hover {
                        svg {
                            path {
                                opacity: 1;
                            }
                        }
                    }
                    svg {
                        margin: calc(100% / 3);
                        path {
                            fill: white;
                            opacity: .5;
                            .transition(opacity .15s ease);
                        }
                    }
                }
            }
        }
        .@{prefix}-input {
            display: block;
            width: 100%;
            height: 2em;
            // ThemeOption: background-color: @primary-color;
            .clearfix;
            &.@{prefix}-loading {
                .@{prefix}-loader {
                    .@{prefix}-dots {
                        font-size: .65em;
                        & > span {
                            vertical-align: middle;
                            background-color: white;
                        }
                    }
                }
            }
            & > * {
                float: left;
            }
            .@{prefix}-symbol {
                width: 2em;
                height: 2em;
                line-height: 2em;
                text-align: center;
                vertical-align: middle;
                b {
                    display: block;
                    color: white;
                    width: 100%;
                    height: inherit;
                    font-size: 1.25em;
                    font-weight: bold;
                }
                & + input, & + input[type] {
                    width: calc(100% - 2em);
                    min-width: 8em;
                }
            }
            input, input[type] {
                width: 100%;
                height: 2em;
                min-width: 10em;
                .no-padding;
                color: white;
                line-height: 2em;
                border: none;
                outline: none;
                background-color: transparent;
                .placeholder-color(fade(white, 50%)) !important;
            }
        }
        .@{prefix}-results {
            overflow: auto;
            width: 100%;
            padding: .25em 0;
            .@{prefix}-item {
                display: block;
                width: 100%;
                height: 2em;
                padding-left: .25em;
                .clearfix;
                &:hover {
                    background-color: fade(black, 2.5%);
                }
                &:last-child {
                    border: none;
                }
                & > * {
                    float: left;
                    display: block;
                }
                img {
                    width: 1.5em;
                    height: 1.5em;
                    margin: .25em;
                    .border-radius(@border-radius-full);
                    & + b {
                        width: calc(100% - 2em);
                    }
                }
                b {
                    width: 100%;
                    height: 2em;
                    line-height: 2em;
                    .single-line-text;
                    pointer-events: none;
                }
            }
        }
    }
}