@import '../base/layout';
@import '../icons/main';

@include exports('dropdowns/layout') {

$input-height: 1.65em;
$input-indent: .33em;

.k-autocomplete,
.k-combobox,
.k-dropdown,
.k-textbox {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 12.4em;
    overflow: visible;
    border-width: 0;
    vertical-align: middle;
    text-align: left;
}

.k-autocomplete,
.k-combobox,
.k-dropdown {
    white-space: nowrap;

    .k-popup {
        width: 100%;
    }
}

.k-autocomplete {
    position: relative;
    cursor: default;
}

.k-dropdown-wrap {
    display: block;
    position: relative;

   .k-select {
        position: absolute; /* icon positioning */
        top: 0;
        right: 0;
        display: inline-block;
        text-decoration: none;
        min-height: $input-height;
        line-height: ($input-height + .35em);
        vertical-align: middle;
        text-align: center;
        width: 1.9em;
        height: 100%;
        padding: 0;
    }

    .k-icon {
        line-height: 2.004em;
    }
}

.k-list-scroller {
    position: relative;
    overflow: auto;
}

.k-textbox,
.k-autocomplete,
.k-dropdown-wrap {
    border-width: 1px;
    border-style: solid;
    padding: 0 1.9em 0 0;
}

.k-textbox,
.k-autocomplete {
    padding: 0;
}

.k-space-left .k-icon {
    left: 3px;
}

.k-space-right .k-icon {
    right: 3px;
}

/*prevent missing bottom border at some zoom levels*/
.k-textbox::after {
  content: '\a0';
  display: block;
  height: .4px;
  overflow: hidden;
}

.k-textbox > input,
.k-combobox .k-input {
    width: 100%;
    vertical-align: top;
}

.k-dropdown-wrap .k-input,
.k-selectbox .k-input {
    font-family: inherit;
    border-width: 0;
    outline: 0;
}

.k-dropdown .k-input,
.k-selectbox .k-input {
    background: transparent;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-combobox .k-select {
    border-style: solid;
    border-width: 0;
    border-color: inherit;
}

.k-textbox > input,
.k-autocomplete .k-input {
    display: block;
}

.k-autocomplete .k-input {
    width: 100%;
}

.k-dropdown .k-select,
.k-selectbox .k-select {
    overflow: hidden;
    border: 0;
    text-decoration: none;
    font: inherit;
    color: inherit;
}

.k-textbox > input,
.k-autocomplete .k-input,
.k-dropdown-wrap .k-input,
.k-selectbox .k-input {
    height: $input-height;
    line-height: $input-height;
    padding: .177em 0;
    box-sizing: content-box;
    text-indent: $input-indent;
    border: 0;
    margin: 0;
}

/* fix missing bottom border on browser zoom in Chrome */
.k-webkit .k-combobox .k-dropdown-wrap::before {
    padding-bottom: .38em;
}

.k-combobox .k-icon,
.k-dropdown,
.k-selectbox .k-icon {
    cursor: pointer;
}

/* MultiSelect */
.k-multiselect-wrap {
    position: relative;
    border-width: 0;
    border-style: solid;
    border-radius: 4px;
    min-height: 2.04em;

    .k-input {
        background-color: transparent;
        height: 1.31em;
        line-height: 1.31em;
        padding: .18em 0;
        text-indent: $input-indent;
        border: 0;
        margin: 1px 0 0;
        float: left;
    }

    .k-input::-ms-clear {
        display: none;
    }

    li {
        margin: 1px 0 1px 1px;
        padding: .1em 1.6em .1em .4em;
        line-height: ($input-height - .15);
        float: left;
        position: relative;
    }

    .k-select {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        padding: .1em .2em;
    }
}

.k-autocomplete .k-loading,
.k-multiselect .k-loading {
    position: absolute;
    right: 3px;
    bottom: 4px;
}

.k-multiselect .k-loading-hidden {
    visibility: hidden;
}

.k-textbox {
    display: inline-block;
    vertical-align: middle;
    outline: 0;

    &.k-space-left {
        padding-left: 1.9em;
    }

    &.k-space-right {
        padding-right: 1.9em;
    }

    .k-icon {
        top: 50%;
        margin: -8px 0 0;
        position: absolute;
    }
}

/* inputs */
.k-input {
    padding: .25em 0;
}

.k-input,
.k-textbox > input {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}

input.k-textbox,
textarea.k-textbox {
    padding: 2px .3em;
}

input.k-textbox {
    height: ($input-height + .35em);
    text-indent: $input-indent;
    line-height: 2em;
}

.k-ie input.k-textbox {
    text-indent: ($input-indent / 2);
}

.k-ff input.k-textbox {
    height: 2.17em;
}

textarea.k-textbox {
    height: auto;
}
}