/* @docs */
$inputitems-background-color: $input-background-color !default;
$inputitems-height: calc(2em - 1px) !default;
$inputitems-padding: calc(.275em - 1px) 0 0 !default;
$inputitems-border-color: $grey-lighter !default;
$inputitems-border-style: solid !default;
$inputitems-border-width: 1px !default;
$inputitems-border-radius: $base-border-radius !default;
$inputitems-color: #363636 !default;
$inputitems-line-height: $base-line-height !default;
$inputitems-box-shadow: inset 0 1px 2px hsla(0,0%,4%,.1) !default;
$inputitems-max-width: 100% !default;
$inputitems-width: 100% !default;
$inputitems-counter-font-size: .75rem !default;
$inputitems-counter-margin: .25rem 0 0 .5rem !default;
$inputitems-item-background-color: $primary !default;
$inputitems-item-color: $primary-invert !default;
$inputitems-item-border-radius: $base-border-radius !default;
$inputitems-item-margin: 0 0 0 0.275em !default;
$inputitems-item-padding: 0 .75em 0 .75em !default;
$inputitems-margin-icon-to-text: .1875em !default;
/* @docs */

.o-inputit {
    display: block;
    &__container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        vertical-align: top;
        flex-wrap: wrap;
        @include avariable('max-width', 'inputitems-max-width', $inputitems-max-width);
        @include avariable('width', 'inputitems-width', $inputitems-width);
        @include avariable('padding', 'inputitems-padding', $inputitems-padding);
        @include avariable('background-color', 'inputitems-background-color', $inputitems-background-color);
        @include avariable('border-color', 'inputitems-border-color', $inputitems-border-color);
        @include avariable('border-style', 'inputitems-border-style', $inputitems-border-style);
        @include avariable('border-width', 'inputitems-border-width', $inputitems-border-width);
        @include avariable('border-radius', 'inputitems-border-radius', $inputitems-border-radius);
        @include avariable('color', 'inputitems-color', $inputitems-color);
        @include avariable('font-size', 'base-font-size', $base-font-size);
        @include avariable('line-height', 'inputitems-line-height', $inputitems-line-height);
        @include avariable('box-shadow', 'inputitems-box-shadow', $inputitems-box-shadow);
        @each $name, $value in $sizes {
            &--#{$name} {
                @include avariable('font-size', ('inputitems-font-size-' + #{$name}), $value);
            }
        }
    }
    &__autocomplete {
        position: static;
        flex: 1;
    }
    &__input {
        border: none;
        box-shadow: none;
        &:focus {
            box-shadow: none;
        }
    }
    &__item {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;
        @include side-flex-gap($inputitems-margin-icon-to-text);
        @include avariable('background-color', 'inputitems-item-background-color', $inputitems-item-background-color);
        @include avariable('color', 'inputitems-item-color', $inputitems-item-color);
        @include avariable('border-radius', 'inputitems-item-border-radius', $inputitems-item-border-radius);
        @include avariable('margin', 'inputitems-item-margin', $inputitems-item-margin);
        @include avariable('padding', 'inputitems-item-padding', $inputitems-item-padding);
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &--#{$name} {
                @include avariable('background-color', ('variant-' + #{$name}), $color);
                @include avariable('color', ('variant-invert-' + #{$name}), $color-invert);
            }
        }
    }
    &__counter {
        display: block;
        float: right;
        @include avariable('font-size', 'inputitems-counter-font-size', $inputitems-counter-font-size);
        @include avariable('margin', 'inputitems-counter-margin', $inputitems-counter-margin);
    }
    &--expanded {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
    }
}