/* @docs */
$input-background-color: #ffffff !default;
$input-border-color: $grey-lighter !default;
$input-border-style: solid !default;
$input-border-width: 1px !default;
$input-border-radius: $base-border-radius !default;
$input-rounded-border-radius: $base-rounded-border-radius !default;
$input-box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1) !default;
$input-color: #363636 !default;
$input-icon-zindex: 4 !default;
$input-counter-font-size: .75rem !default;
$input-counter-margin: .25rem 0 0 .5rem !default;
$input-height: $control-height !default;
$input-line-height: $base-line-height !default;
$input-margin: 0 !default;
$input-padding: $control-padding-vertical $control-padding-horizontal !default;
$input-textarea-max-height: 600px !default;
$input-textarea-min-height: 120px !default;
$input-textarea-padding: 0.625em !default;
// @deprecated
$input-width: 100% !default;
// @deprecated
$input-max-width: 100% !default;
/* @docs */

.o-ctrl-input {
    display: block;
    position: relative;
    &--expanded {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
    }
}

.o-input {
    -moz-appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    position: relative;
    vertical-align: top;
    width: $input-width;
    @include avariable('box-shadow', 'input-box-shadow', $input-box-shadow);
    @include avariable('max-width', 'input-max-width', $input-max-width);
    @include avariable('background-color', 'input-background-color', $input-background-color);
    @include avariable('border-color', 'input-border-color', $input-border-color);
    @include avariable('border-style', 'input-border-style', $input-border-style);
    @include avariable('border-width', 'input-border-width', $input-border-width);
    @include avariable('border-radius', 'input-border-radius', $input-border-radius);
    @include avariable('color', 'input-color', $input-color);
    @include avariable('font-size', 'base-font-size', $base-font-size);
    @include avariable('height', 'input-height', $input-height);
    @include avariable('line-height', 'input-line-height', $input-line-height);
    @include avariable('padding', 'input-padding', $input-padding);
    @include avariable('margin', 'input-margin', $input-margin);
    &-iconspace-left {
        @include avariable('padding-left', 'input-height', $input-height);
    }
    &-iconspace-right {
        @include avariable('padding-right', 'input-height', $input-height);
    }
    &--rounded {
        @include avariable('border-radius', 'input-rounded-border-radius', $input-rounded-border-radius);
    }
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('input-font-size-' + #{$name}), $value);
        }
    }
    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        &--#{$name} {
            @include avariable('border-color', ('variant-' + #{$name}), $color);
        }
    }
    &__textarea {
        display: block;
        max-width: 100%;
        min-width: 100%;
        height: auto;
        resize: vertical;
        @include avariable('padding', 'input-textarea-padding', $input-textarea-padding);
        &:not([rows]) {
            @include avariable('max-height', 'input-textarea-max-height', $input-textarea-max-height);
            @include avariable('min-height', 'input-textarea-min-height', $input-textarea-min-height);
        }
    }
    &__counter {
        display: block;
        float: right;
        @include avariable('font-size', 'input-counter-font-size', $input-counter-font-size);
        @include avariable('margin', 'input-counter-margin', $input-counter-margin);
    }
    &__icon-left, &__icon-right {
        position: absolute;
        top: 0;
        height: 100%;
        @include avariable('width', 'input-height', $input-height);
        @include avariable('z-index', 'input-icon-zindex', $input-icon-zindex);
    }
    &__icon-right {
        right: 0;
    }
    &__icon-left {
        left: 0;
    }
}