.i-input{
    @import (reference) "../i/i.less";
    
    position:relative;
    display:inline-block;
    vertical-align: baseline;
    border: none;
    box-sizing:border-box;
    font-size: 1rem;

    &__input{
        box-sizing:border-box;
        vertical-align: baseline;
        font-family:arial, sans-serif;
        width: 100%;
        padding: 0 2.2em 0 .6em;
        border: 1px solid @border-color;
        height: 2em;
        font-size: 1em;
        
        &:focus{
            outline:none;
            border-color: @focus-color;
            box-shadow: inset 0 0 0 1px @focus-color;
        }
        
        &::-webkit-input-placeholder, &::-moz-placeholder{
            color: #999;
        }
    }
    
    &__clear{
        position: absolute;
        top: 0;
        right: 0;
        width: 2em;
        height: 2em;
        cursor:pointer;

        
        
        &:not(:hover){
            &::before, &::after{
                opacity: 0.3;
            }
        }
    }
    
    &__empty &__clear, &__disabled &__clear{
        display: none;
    }
    
    &__disabled &__input{
        border-color: transparent;
        background-color: @disabled-color;
        color: #999;
    }
    
    &__size{
        &-L{
            font-size: 1.25rem;
            
            .i-input__clear{
                &::before{
                    .cross-line-nw;
                    transform+_: scale(0.625);
                }

                &::after{
                    .cross-line-ne;
                    transform+_: scale(0.625);
                }
            }
            
        }
        &-M{
            font-size: 1rem;
            
            .i-input__clear{
                &::before{
                    .cross-line-nw;
                    transform+_: scale(0.5);
                }

                &::after{
                    .cross-line-ne;
                    transform+_: scale(0.5);
                }
            }
        }
        &-S{
            font-size: .75rem;
            
            .i-input__clear{
                &::before{
                    .cross-line-nw;
                    transform+_: scale(0.375);
                }

                &::after{
                    .cross-line-ne;
                    transform+_: scale(0.375);
                }
            }
        }
    }
    
    .cross-line{
        .line;
        right: 1em;
        top: ~"calc(1em - 1rem)";
    }
        
    .cross-line-nw{
        .cross-line;
        transform+_: rotate(-45deg);
    }
        
    .cross-line-ne{
        .cross-line;
        transform+_: rotate(45deg);
    }
    
    &__suggest{
        box-sizing: border-box;
        white-space: nowrap;
        cursor: default;
        -webkit-user-select: none;
        user-select: none;
        text-align: left;
        overflow-y: auto;
        
        overflow-x: hidden;
        max-height: 50vh;
        display: flex;
        flex-direction: column;
        
        &_item{
            display: inline-flex;
            flex-shrink: 0;
            padding: 0 1em;
            line-height: 2em;
            cursor: pointer;

            &__active{
                background-color: @checked-color;
            }
        }
    }
}