@include exports("autocomplete/layout") {

    // Layout
    .k-autocomplete {
        @include border-radius( $input-border-radius );
        padding: 0 $picker-select-calc-size 0 0;
        width: $input-default-width;
        border-width: $input-border-width;
        border-style: solid;
        box-sizing: border-box;
        background: none;
        font-family: $input-font-family;
        font-size: $input-font-size;
        line-height: $input-line-height;
        text-align: left;
        white-space: nowrap;
        display: inline-flex;
        vertical-align: middle;
        transition: all .1s ease; // sass-lint:disable-block no-transition-all
        position: relative;
        cursor: default;
        outline: 0;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-input {
            padding: $input-padding-y $input-padding-x;
            height: calc( #{$input-padding-y * 2} + #{$input-line-height * 1em} );
            box-sizing: border-box;
            border: 0;
            outline: 0;
            color: inherit;
            background: none;
            font: inherit;
            flex: 0 1 auto;
            display: flex;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .k-i-close {
            display: none;
            align-self: center;
        }

        .k-i-loading {
            height: ($input-line-height * $input-font-size);
            line-height: ($input-line-height * $input-font-size);
            position: absolute;
            top: $input-padding-y;
            right: $input-icon-offset;


            .k-rtl &,
            [dir="rtl"] & {
                right: auto;
                left: $input-icon-offset;
            }
        }

        .k-clear-value {
            height: ($input-line-height * $input-font-size);
            line-height: ($input-line-height * $input-font-size);
            outline: 0;
            cursor: pointer;
            display: none;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            opacity: .5;
            position: absolute;
            top: $input-padding-y;
            right: $input-icon-offset;


            .k-rtl &,
            [dir="rtl"] & {
                right: auto;
                left: $input-icon-offset;
            }
        }
        .k-clear-value {
            &:hover {
                opacity: 1;
            }
        }

        // Searchbar
        .k-searchbar {
            flex: 1;
            display: flex;
            flex-direction: row;
        }

        &:hover,
        &.k-state-hover,
        &.k-state-focused {
            .k-i-close {
                display: flex;
                outline: 0;
            }

            .k-clear-value {
                display: inline-flex;
            }
        }

        &[dir="rtl"],
        .k-rtl & {
            padding-left: $picker-select-calc-size;
            padding-right: 0;
            text-align: right;

            .k-select {
                @include border-left-radius-only();
            }

            .k-clear-value,
            .k-i-loading {
                right: auto;
                left: $input-icon-offset;
            }
        }

        ::-ms-clear {
            display: none;
        }
    }

}