@import "common/var";

.ob-form .text-item,
.obelisk-form .text-item {
    position: relative;
    font-size: $--input-font-size;
    display: inline-block;

    .input-text {
        -webkit-appearance: none;
        background-image: none;
        display: inline-block;
        outline: none;
        transition: $--border-transition-base;
        width: 100%;
    }

    &.focus-input .input-text {
        border: $--input-border;
        border-radius: $--input-border-radius;
        float: none;
        position: relative;
        z-index: auto;

        &:hover {
            border-color: $--input-border-color-hover;
            outline: 0;
        }
        &:focus {
            border-color: $--input-border-color-focus;
            outline: 0;
        }
        &.error {
            border-color: $--input-border-color-error;
        }
        &[disabled],
        &.disabled {
            border-color: $--input-border-color-disabled;
            background-color: $--input-fill-color-disabled;
            cursor: not-allowed;
        }
    }

    &.focus-suffix-input {
        .input-text {
            padding-right: 30px;
        }
    }
    .focus-input-suffix {
        position: absolute;
        height: 100%;
        right: 5px;
        top: 0;
        text-align: center;
        color: $--input-icon-color;
        transition: all .3s;
        pointer-events: none;
    }

    .focus-input-suffix-inner {
        pointer-events: all;
    }

    &.focus-prefix-input {
        .input-text {
            padding-left: 30px;
        }
    }

    .focus-input-prefix {
        position: absolute;
        height: 100%;
        left: 5px;
        top: 0;
        text-align: center;
        color: $--input-icon-color;
        transition: all .3s;
    }

    .focus-input-icon {
        height: 100%;
        width: 25px;
        text-align: center;
        transition: all .3s;
        line-height: $--input-height;

        &:after {
            content: '';
            height: 100%;
            width: 0;
            display: inline-block;
            vertical-align: middle;
        }
    }

    .focus-input-validate-icon{
        pointer-events: none;
    }

    //@include when(active) {
    //    .el-input__inner {
    //        outline: none;
    //        border-color: $--input-border-color-focus;
    //    }
    //}

    &.disabled {
        .focus-input-icon {
            cursor: not-allowed;
        }
    }

    .focus-input-big {
        font-size: $--input-medium-font-size;

        .input-text {
            height: $--input-medium-height;
        }

        .focus-input-icon {
            line-height: $--input-medium-height;
        }
    }

    .focus-input-small {
        font-size: $--input-mini-font-size;

        .input-text {
            height: $--input-mini-height;
        }

        .focus-input-icon {
            line-height: $--input-mini-height;
        }
    }
}

.ob-form,.obelisk-form{
    .text-item.focus-input-group {
        line-height: normal;
        display: inline-table;
        width: 100%;
        border-collapse: separate;

        > .input-text {
            vertical-align: middle;
            display: table-cell;
        }

        .focus-input-append,
        .focus-input-prepend {
            background-color: $--background-color-base;
            color: $color-black;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            z-index: -2;
            padding: 0 20px;
            width: 1px;
            white-space: nowrap;

            &:focus {
                outline: none;
            }

            //.el-select,
            //.el-button {
            //    display: inline-block;
            //    margin: -20px;
            //}
            //
            //button.el-button,
            //div.el-select .el-input__inner,
            //div.el-select:hover .el-input__inner {
            //    border-color: transparent;
            //    background-color: transparent;
            //    color: inherit;
            //    border-top: 0;
            //    border-bottom: 0;
            //}
            //
            //.el-button,
            //.el-input {
            //    font-size: inherit;
            //}
        }

        .focus-input-prepend {
            border-right: $--input-border;
        }

        .focus-input-append {
            border-left: $--input-border;
        }

        &.focus-prepend-input {
            .input-text {
                border-left: 0;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        &.focus-append-input {
            .input-text {
                border-right: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        &.disabled {
            .focus-input-append,.focus-input-prepend {
                border-color: $--input-border-color-disabled;
                background-color: $--input-fill-color-disabled;
            }
        }


        .input-ctnr{
            transition: $--border-transition-base;
            background-color: rgba(0,0,0,0);

            z-index: -1;
        }

        .input-text[disabled] + .input-ctnr,
        .input-text.disabled + .input-ctnr {
            background-color: rgba(0,0,0,0);
        }
    }
}