@import "effects";

vn-autocomplete {
    overflow: hidden;

    & > div > .mdl-textfield {
        position: relative;
        width: 100%;

        & > input {
            cursor: pointer;
            height: 30px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        & > .icons {
            display: none;
            position: absolute;
            right: 0;
            top: 1.3em;
            height: 1em;
            color: $color-font-secondary;
            border-radius: .2em;

            & > vn-icon {
                cursor: pointer;
                font-size: 18px;

                &:hover {
                    color: $color-font;
                }
            }
        }
        &:hover > .icons,
        & > input:focus + .icons {
            display: block;
        }
    }

    label span:nth-child(2) {
        color: $color-alert
    }
}

ul.vn-autocomplete {
    list-style-type: none;
    padding: 1em;
    margin: 0;
    padding: 0;
    overflow: auto;
    max-height: 300px;

    li {
        @extend %clickable;
        display: block;
        padding: .8em;
        margin: 0;

        &.load-more {
            color: $color-main;
            font-family: vn-font-bold;
            padding: .4em .8em;
        }
    }
}