.#{$uiName}-input {
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(34,36,38,.15);
    background: white;
    @include border-radius(3px);
    box-shadow: 0 0 0 0 transparent inset;

    .#{$uiName}-button {
        height: 100% !important;
        padding: 0 10px;
        @include border-radius-right(2px);
        @include border-radius-left(0);
    }

    &.no-border {
        border: none;

        .dd-button-ui {

            > div {
                border: 0;
                margin: 0;
            }

            &.active {
                border-left: 1px solid transparent;
                > .button {

                    & + div {
                        display: block;
                    }
                }
            }
        }

        .jump-ui-dropdown {
            border: 0;
            margin: 0;
        }
    }

    &.no-radius {
        @include border-radius(0);

        .#{$uiName}-button {
            @include border-radius-right(0);
        }
    }

    &.cursor-pointer {
        cursor: pointer;

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                cursor: pointer ;
            }
        }
    }

    input[type="file"] {
        &.jump-ui {
            display: none !important;
        }
    }

    &.focus {
        border-color: #85b7d9;
        box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;

        .icon-ui {
            color: rgba(0,0,0,.87);
        }
    }

    &.error {
        background: lighten(red, 47%);
        border-color: red;

        .error-message-ui {
            display: block;
        }
    }

    &.disabled {
        pointer-events: none;
        cursor: default;
        position: relative;

        &:after {
            content: '';
            background: rgba(0,0,0,.035);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    &.readonly {
        pointer-events: none;
        cursor: default;
        position: relative;

        &:after {
            content: '';
            background: rgba(255,255,255,.2);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    &.icon {
        .caption-text-ui {
            padding-left: 0 !important;
            padding-right: 0 !important;

            &.data-active {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        }

        .jump-ui {
            padding: 0 !important;
        }

        &.icon-right {
            .caption-text-ui {
                padding-left: 10px !important;

                &.data-active {
                    padding-left: 10px !important;
                }
            }

            .jump-ui {
                padding: 0 10px !important;
            }
        }

        &.icon-left {
            .caption-text-ui {
                padding-left: 0 !important;

                &.data-active {
                    padding-left: 0 !important;
                }
            }

            .jump-ui {
                padding: 0 !important;
            }
        }
    }

    /*&.huge-ui {
        height: map-get($huge-size, 'height');
        font-size:  map-get($huge-size, 'font');

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;

            &.data-active {
                padding-top: 4px;
                font-size: .4em;
            }
        }

        .label-ui {
            font-size: .8em;
        }

        .dd-button-ui {
            > .button {
                font-size: .7em;
            }
        }
    }*/

    &.large-ui {
        height: map-get($large-size, 'height');
        font-size:  map-get($large-size, 'font');

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;

            &.data-active {
                padding-top: 4px;
                font-size: .59em;
            }
        }

        .label-ui {
            font-size: .8em;
        }

        .dd-button-ui {
            > .button {
                font-size: .7em;
            }
        }
    }

    &.default-ui {
        height: map-get($default-size, 'height');
        font-size:  map-get($default-size, 'font');

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;

            &.data-active {
                padding-top: 4px;
                font-size: .59em;
            }
        }

        .label-ui {
            font-size: .8em;
        }

        .dd-button-ui {
            > .button {
                font-size: .7em;
            }
        }
    }

    &.medium-ui {
        height: map-get($medium-size, 'height');
        font-size:  map-get($medium-size, 'font');

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;

            &.data-active {
                padding-top: 4px;
                font-size: .5em;
            }
        }

        .label-ui {
            font-size: .8em;
        }

        .dd-button-ui {
            > .button {
                font-size: .7em;
            }
        }


    }

    &.small-ui {
        height: map-get($small-size, 'height');
        font-size:  map-get($small-size, 'font');

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;

            &.data-active {
                padding-top: 2px;
                font-size: .6em;
            }
        }

        .label-ui {
            font-size: .8em;
        }

        .dd-button-ui {
            > .button {
                font-size: .9em;
            }

            > div {
                > a {
                    padding: 5px 10px;
                    font-size: .9em;
                }
            }
        }

        .jump-ui-dropdown {

            li {
                padding: 10px;
                font-size: .9em;
            }
        }
        .icon-ui {
            padding: 0 10px;
        }

    }

    &.tiny-ui {
        height: map-get($tiny-size, 'height');
        font-size:  map-get($tiny-size, 'font');

        input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
            &.jump-ui {
                @extend .input-extend-css;
                font-size: 1em;
                padding: 0 10px;
            }
        }

        .caption-text-ui {
            font-size: 1em;
            padding: 0 10px;
            display: none;

            &.data-active {
                padding-top: 2px;
                font-size: .6em;
            }
        }

        .label-ui {
            font-size: .9em;
        }

        .icon-ui {
            padding: 0 7.5px;
        }

        .dd-button-ui {
            > .button {
                font-size: .9em;
            }

            > div {
                > a {
                    padding: 5px 10px;
                    font-size: .9em;
                }
            }
        }

        .jump-ui-dropdown {

            li {
                padding: 10px;
                font-size: .9em;
            }
        }
    }
}