@import (reference) "./common.less";

.autocompletion {
    background-color: @background-color;
    border: 1px solid gray;
    box-shadow: 4px 4px @shadow-color;
    color: @text-color;
    max-width: 800px;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    animation-name: appear;
    animation-duration: 0.1s;

    .entry {
        &.selected {
            background-color: rgb(60, 60, 60);

            .main {
                opacity: 1;

                .icon {
                    border-left: 1px solid white;
                }
            }
        }

        .main {
            transition: opacity 1s;
            opacity: 0.8;
            display: flex;
            flex-direction: row;
            align-items: center;

            .icon {
                padding: 4px;
                width: 20px;
                flex: 0 0 auto;
                color: white;

                i {
                    margin-left: 4px;
                    margin-right: 4px;
                    font-size: 10px;
                }
            }
        }

        .label {
            flex: 1 0 auto;
            min-width:100px;
            margin-left: 8px;

            .highlight {
                font-weight: bold;
                font-style: italic;
                color: @text-color-highlight;
            }
        }

        .detail {
            flex: 0 1 auto;
            min-width: 50px;
            text-align: right;

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-left: 16px;

            color: @text-color-detail;

            font-size: 11px;
        }

        .documentation {
            font-size: 10px;
            color: @text-color-highlight;
        }
    }
}

@keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
}