nts-input{
    display: flex;
    line-height: $input-height;

    input, textarea{
        height: $input-height;
        padding-left: $input-padding;
        padding-right: $input-padding;
        border-radius: $border-radius;
        @include border($border-width);
        &:focus{
            background-color: $alpha-black-light !important;
            border-color: $alpha-black-medium !important;
        }
    }
    textarea{
        padding: $input-padding;
        min-height: $input-height*2;
    }

    ::placeholder {
        color: $color-grey-dark;
        font-weight: 300;
    }

    .icon, .icon-right{
        opacity: 0.5;
    }
    .icon{
        left: ($input-height - $input-padding*2) / 2;
    }
    .icon-right{
        right: ($input-height - $input-padding*2) / 2;
    }

    .with-icon input{ padding-left: $input-height; }
    .with-icon-right input{ padding-right: $input-height; }
    .with-two-icon-right input{ padding-right: 40px; }
    .with-prefix input{ border-radius: 0 $border-radius $border-radius 0; }

    .label, .prefix, .error, .hint{
        font-weight: 300;
        line-height: $label-height;
        font-size: $font-small;
        color: $color-grey-dark;
        margin: 0 $input-padding/4;
        height: $label-height;
    };

    .floating {
        &.focused, &.has-content{
            span {
                font-size: $font-small;
                top: 0;
                left: 0;
                line-height: $label-height;
                cursor: default;
            }
        }
        span {
            font-size: $font-regular;
            position: absolute;
            top: $label-height;
            left: $input-padding;
            line-height: $input-height;
            cursor: text;
            transition: 100ms ease all;
        }
        input, textarea{
            @include border(0);
            background-color: transparent;
        }
    }
    .prefix{
        height: $input-height;
        padding: 0 $input-padding;
        margin:0;
        background-color: $alpha-black-light;
        @include border($border-width);
        border-radius: $border-radius 0 0 $border-radius;
        border-right: 0 !important;
    }

    .clear-btn{
        margin-left: - $input-height;
    }

    .with-two-icon-right {
        .clear-btn{  margin-left: - 50px; }
    }

    .hint{
        color: $color-grey;
        font-style: italic;
    }
    .error{
        color: $color-error;
        font-weight: 400;
    }


    &.input-large{
        input{
            height: $input-height + $label-height;
        }
        input, textarea{
            font-size: $font-largest;
        }
    }
    &.input-text-large{
        input, textarea{
            font-size: $font-large;
        }
    }
    &.input-text-xlarge{
        input, textarea{
            font-size: $font-xlarge;
        }
    }
    &.input-primary{
        input{
            color: $color-primary;
            font-weight: bold;
        }
    }
}