.input_theme_realty {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    position: relative;
    display: inline-block;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 3px;
    background-color: #fff;

    &.input_width_available {
        width: 100%;
    }

    &.input_focused {
        border-color: #50a3f1;
        z-index: 1;
    }

    .input__box {
        display: flex;
        align-items: center;
        flex: 1;
        height: 34px;
    }

    .input__control {
        font: inherit;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        color: rgba(0,0,0,.87);
        border: none;
        outline: none;
        background-color: transparent;
        padding-right: 34px;

        &::-webkit-input-placeholder { font-size: 13px; }
        &::-moz-placeholder          { font-size: 13px; }/* Firefox 19+ */
        &:-moz-placeholder           { font-size: 13px; }/* Firefox 18- */
        &:-ms-input-placeholder      { font-size: 13px; }
    }

    &.input_size_s {
        padding: 0 8px;
        border-radius: 2px;

        .input__box {
            height: 29px;
        }

        .input__spin {
            font-size: 2px;
            width: 20px;
            height: 20px;
            margin-top: -10px;
            top: 50%;
            right: 2%;
        }

        .input__clear {
            background-size: 9px;
            width: 29px;
        }

        .input__password-view {
            width: 29px;
        }


        &.input_has-clear .input__control,
        &.input_has-spin .input__control,
        &.input_has-password .input__control {
            padding-right: 26 - 8px;
        }

        .input__control {
            font-size: 12px;
        }
    }

    &.input_size_m {
        padding: 0 10px;
        border-radius: 3px;

        .input__box {
            height: 36px;
        }

        .input__clear {
            background-size: 12px;
            width: 36px;
        }

        .input__spin {
            font-size: 4px;
            width: 28px;
            height: 28px;
            right: 2%;
            top: 50%;
            margin-top: -14px;
        }

        .input__password-view {
            width: 36px;
        }


        &.input_has-clear .input__control,
        &.input_has-spin .input__control,
        &.input_has-password .input__control {
            padding-right: 34 - 10px;
        }

    }

    &.input_size_l {
        padding: 0 14px;
        border-radius: 4px;

        .input__box {
            height: 46px;
        }

        .input__spin {
            font-size: 4px;
            width: 30px;
            height: 30px;
            right: 2%;
            top: 50%;
            margin-top: -15px;
        }

        .input__clear {
            background-size: 12px;
            width: 46px;
        }

        .input__password-view {
            width: 46px;
        }

        &.input_has-clear .input__control,
        &.input_has-password .input__control,
        &.input_has-spin .input__control {
            padding-right: 38 - 14px;
        }

        .input__control {
            font-size: 15px;
        }
    }

    &.input_size_xl {
        padding: 0 16px;
        border-radius: 4px;

        .input__box {
            height: 50px
        }

        .input__spin {
            margin-right: 2px;
            font-size: 4px;
            width: 34px;
            height: 34px;
            right: 2%;
            top: 50%;
            margin-top: -17px;
        }

        .input__clear {
            background-size: 16px;
            width: 50px;
        }

        .input__password-view {
            width: 50px;
        }

        &.input_has-clear .input__control,
        &.input_has-password.input__control,
        &.input_has-spin .input__control {
            padding-right: 50 - 16px;
        }
    }

    // region Design input clear

    .input__clear {
        position: absolute;
        top: 0;
        right: 0;
        cursor: text;
        width: 34px;
        height: 100%;

        background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1wcmVmaXg9ImZhbCIgZGF0YS1pY29uPSJ0aW1lcyIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtdGltZXMgZmEtdy0xMCI+PHBhdGggZmlsbD0iIzQ5NTA1NyIgZD0iTTE5My45NCAyNTZMMjk2LjUgMTUzLjQ0bDIxLjE1LTIxLjE1YzMuMTItMy4xMiAzLjEyLTguMTkgMC0xMS4zMWwtMjIuNjMtMjIuNjNjLTMuMTItMy4xMi04LjE5LTMuMTItMTEuMzEgMEwxNjAgMjIyLjA2IDM2LjI5IDk4LjM0Yy0zLjEyLTMuMTItOC4xOS0zLjEyLTExLjMxIDBMMi4zNCAxMjAuOTdjLTMuMTIgMy4xMi0zLjEyIDguMTkgMCAxMS4zMUwxMjYuMDYgMjU2IDIuMzQgMzc5LjcxYy0zLjEyIDMuMTItMy4xMiA4LjE5IDAgMTEuMzFsMjIuNjMgMjIuNjNjMy4xMiAzLjEyIDguMTkgMy4xMiAxMS4zMSAwTDE2MCAyODkuOTQgMjYyLjU2IDM5Mi41bDIxLjE1IDIxLjE1YzMuMTIgMy4xMiA4LjE5IDMuMTIgMTEuMzEgMGwyMi42My0yMi42M2MzLjEyLTMuMTIgMy4xMi04LjE5IDAtMTEuMzFMMTkzLjk0IDI1NnoiIGNsYXNzPSIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxcHgiPjwvcGF0aD48L3N2Zz4=);
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: 50% 50%;
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition: visibility 0s linear .1s,opacity .1s ease-out;

        &.input__clear_visible {
            visibility: visible;
            cursor: pointer;
            pointer-events: auto;
            opacity: .3;
            transition: opacity .1s ease-out;
        }

        &:hover {
            opacity: 1;
        }
    }

    .input_focused .input__clear_visible {
        opacity: 1;
    }

    // endregion

    // region Spin mod design
    .input__spin {
        position: absolute;
        top: 0;
        right: 0;
        cursor: text;
        width: 34px;
        height: 100%;
        z-index: 1;


        &.input__spin_visible .spin {
            opacity: 1;
            cursor: pointer;
            z-index: 2;
        }
    }

    &.input_type_suggest:not(.input_progress) .input__spin .spin{
        opacity: 0;
    }

    &.input_type_suggest.input_progress .input__spin .spin{
        opacity: 1;
    }

    // endregion

    //region Password view design
    .input__password-view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 100%; // because is position absolute
        fill: #2c8be4;
        transition: opacity .1s ease-out;

        .icon {
            margin: 0;
        }

        .icon_glyph_eye-slash {
            display: none;
        }

        .icon_glyph_eye {
            display: block;
        }

        &.input__password-view_visible {
            opacity: 1;
            cursor: pointer;
        }

    }

    &.input_password-visible .input__password-view{

        .icon_glyph_eye-slash {
            display: block;
        }

        .icon_glyph_eye {
            display: none;
        }
    }
    //endregion

}

.control-group .input_theme_realty {

    z-index: 1;

    &.input:not(:first-child):not(:last-child) {
        border-radius: 0;
        margin-left: -1px;
        margin-right: -1px;

        &.input_focused {
            z-index: 2;
        }

    }

    &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        &.input_focused {
            z-index: 2;
        }
        margin-right: -1px;
    }

    &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        &.input_focused {
            z-index: 2;
        }
    }

}