.igz-number-input {
    .number-input-color-set();

    min-width: 115px;
    font-family: @font-family-sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 36px;
    position: relative;
    background-color: @number-input-bg-color;
    border: @number-input-border;
    border-radius: 2px;
    color: @number-input-color;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px 0 11px;
    z-index: 3;

    &:not(.disabled) {
        &:focus.ng-invalid:not(.ng-pristine), &.ng-invalid.ng-touched {
            background-color: @number-input-not-disabled-focus-invalid-bg-color;
            border: @number-input-not-disabled-focus-invalid-border;
            box-shadow: none;
            outline: none;
        }

        &:focus-within, &.focused {
            outline: 0;
            border: @number-input-not-disabled-hover-focus-border;
        }

        &.invalid:not(.pristine), &.invalid.submitted {
            background-color: @number-input-not-disabled-invalid-bg-color;
            border: @number-input-not-disabled-invalid-border;
            box-shadow: none;
        }

        &:focus.ng-valid, &:focus.ng-pristine {
            border: @number-input-not-disabled-valid-border;
            box-shadow: none;
            outline: none;
        }
    }

    &.additional-left-padding {
        padding-left: 22px;
    }

    .input-field {
        border: none;
        outline: 0;
        padding: 0;
        text-align: left;
        background-color: @number-input-field-bg-color;
    }

    //
    // placeholder
    //

    ::-webkit-input-placeholder {
        /* Chrome, Chromium, Edge, Safari, Opera*/
        color: @number-input-placeholder-color;
    }

    :-moz-placeholder {
        /* Firefox 4-18 */
        color: @number-input-placeholder-color;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        color: @number-input-placeholder-color;
    }

    :-ms-input-placeholder {
        /* - Internet Explorer 10–11
           - Internet Explorer Mobile 10-11 */
        color: @number-input-placeholder-color !important;
    }

    ::placeholder {
        /* modern browser versions */
        color: @number-input-placeholder-color;
    }

    .additional-left-block {
        .prefix-unit {
            color: @number-input-additional-left-block-prefix-unit-color;
            font-size: 14px;
            font-weight: 700;
            padding-right: 7px;
        }
    }

    .suffix-unit-container {
        display: flex;
        align-items: center;

        .suffix-unit {
            color: @number-input-suffix-unit-color;
            font-size: 14px;
            font-weight: 400;
            padding-left: 3px;
        }
    }

    .arrow-block {
        font-size: 11px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        margin-left: 6px;

        .igz-icon-dropup, .igz-icon-dropdown {
            color: @number-input-arrow-block-icon-color;
            cursor: pointer;
            display: block;
            line-height: 11px;
            outline: 0;

            &:hover {
                color: @number-input-arrow-block-icon-hover-color;
            }
        }
    }

    &.disabled {
        background-color: @number-input-disabled-bg-color;
        opacity: 0.5;

        .suffix-unit {
            opacity: 0.5;
        }

        .igz-icon-dropup, .igz-icon-dropdown {
            &, &:hover {
                color: @number-input-disabled-icon-hover-color;
                opacity: 0.5;
                cursor: default;
            }
        }
    }
}

.step3, .step4 {
    .additional-right-padding {
        padding-right: 50px;
    }
}