.#{$pui}input {
    @include control;
    @include sizes;

    position: relative;
    display: inline-block;

    border-width: 1px;
    border-style: solid;
    border-color: $color-border-gray;
    border-radius: $border-radius;

    height: $input-height-unlabeled;
    min-width: $input-min-width;
    width: 100%;

    &:hover:not([disabled]) {
        border-color: $color-gray;
    }

    &[disabled] {
        background-color: $color-dark-gray-bg;

        .label,
        & > input,
        .#{$pui}treeselect,
        .#{$pui}icon {
            opacity: $input-disabled-opacity;
        }
    }

    &.focused,
    &.focused:hover {
        border-color: $color-primary;
    }

    @each $name, $color in $color-schema {
        &.is-#{$name} {
            border-color: $color;

            &:hover,
            &.focused {
                border-color: darken($color, $color-darken-ammount);
            }
        }
    }

    & > input {
        &::-webkit-input-placeholder {
            color: $color-dark-gray;
            opacity: .7;
        }
    }

    & > input,
    .#{$pui}treeselect {
        position: absolute;
        top: 0;
        left: 0;
        height: $input-height-unlabeled;
        width: 100%;
        box-sizing: border-box;

        padding: 0 $input-padding-h;

        color: $color-black;
        border-radius: $border-radius;
        background: transparent;
        border: 0;
        outline: none;
        font-size: inherit;

        @include autofill-hack;
    }

    .#{$pui}treeselect {
        top: -2px;
    }

    &.has-label {
        height: $input-height;

        & > input, 
        .#{$pui}treeselect {
            top: 0;
            
            height: $input-height;
            padding-top: $input-padding-v;

            vertical-align: center;
        }

        .label {
            display: block;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            padding: 0 $input-padding-h;
            line-height: $input-height;

            color: $color-dark-gray;

            @include transitions;
            transition-property: line-height, font-size;
        }

        &.is-required .label:after {
            display: inline-block;
            margin-left: 2px;
            content: '*';
            color: $color-danger;
        }

        @each $name, $color in $color-schema {
            &.is-#{$name} {
                .label {
                    color: $color;
                }
            }
        }

        &.focused,
        &.filled {
            .label {
                font-size: calc(#{$size-normal} * 0.75);

                line-height: calc(#{$input-height} / 1.5);
            }

            @each $name, $size in $sizes {
                &.is-#{$name} {
                    .label {
                        font-size: calc(#{$size} * 0.65);
                    }
                }
            }
        }
    }

    &.has-icon {
        & > input,
        .#{$pui}treeselect {
            padding-left: calc(#{$input-padding-h} * 2.75);
        }

        .label {
            padding-left: calc(#{$input-padding-h} * 2.75);
        }

        .#{$pui}icon {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 0;
            padding-left: $input-padding-v;
        }

        @each $name, $color in $color-schema {
            &.is-#{$name} .#{$pui}icon {
                color: $color;
            }
        }
    }

    &.has-action,
    &.has-hint {
        & > input,
        .#{$pui}treeselect,
        .label {
            padding-right: calc(#{$input-padding-h} * 3);
        }
    }

    &.has-action.has-hint {
        & > input,
        .#{$pui}treeselect,
        .label {
            padding-right: calc(#{$input-padding-h} * 4.5);
        }
    }

    &.has-action {
        .action-trigger {
            position: absolute;
            display: block;
            top: 50%;
            right: $input-padding-h;
            transform: translateY(-50%);
            z-index: 3;

            cursor: pointer;
            color: $color-dark-gray;
            background-color: $color-border-gray;
            width: 1.2rem;
            height: 1.2rem;
            text-align: center;
            line-height: 1.2rem;
            border-radius: 100%;
            font-size: 0.9rem;
        }
    }

    &.has-hint {
        .hint {
            position: absolute;
            display: block;
            top: 50%;
            right: $input-padding-h;
            transform: translateY(-50%);
            z-index: 3;

            cursor: default;
            color: $color-dark-gray;
            width: 1.2rem;
            height: 1.2rem;
            text-align: center;
            line-height: 1.2rem;
            border-radius: 100%;
            font-size: 1.2rem;
        }

        &.has-action .hint {
            right: calc(#{$input-padding-h} * 2.7);
        }
    }
}