/* Copyright (C) 2016 NooBaa */

autocomplete {
    position: relative;

    .suggestion-list {
        display: block;
        position: absolute;
        width: 100%;
        top: auto;
        bottom: auto;
        background-color: rgb(var(--color02));
        margin-top: 2px;
        padding: 2px 0;
        z-index: 1;
        min-height: 24px;
        max-height: 170px;
        overflow-y: auto;

        &::-webkit-scrollbar-thumb  {
            border-color: rgb(var(--color02));
        }
    }

    .suggestion {
        @focus-color: rgba(var(--color20), .3);

        color: rgb(var(--color16));
        font-size: @font-size3;
        cursor: pointer;
        padding: @gutter/2;
        border: 1px solid transparent;
        background: none;
        margin: 0 2px;

        &.ring {
            display: relative;
            z-index: 1;
            border-color: @focus-color;
            box-shadow:
                0 0 2px @focus-color,
                inset 0 0 2px @focus-color;
        }

        &:hover {
            background-color: rgb(var(--color04));
            border-color: rgb(var(--color04));

            &.ring {
                border-color: @focus-color;
            }
        }

        .match {
            display: inline;
            font-weight: @font-medium;
        }
    }
}
