.cm-input-wrapper{
    display: inline-flex;
    width: 100%;
    height: var(--height-control-default);
    position: relative;
    border: 1px solid var(--cui-default-border);
    border-radius: var(--cui-border-radius-small);
    background-color: var(--cui-color-bg-0);
    background-image: none;
    line-height: normal;
    flex-direction: row;
    align-items: center;
    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
    &:hover,
    &:focus-within{
        border-color: var(--cui-color-primary);
        -webkit-box-shadow: 0 0 0 2px rgb(45 140 240 / 20%);
        box-shadow: 0 0 0 2px rgb(45 140 240 / 20%);
    }
    &.cm-input-disabled {
        background-color: var(--cui-color-disabled-bg);
        opacity: 1;
        cursor: not-allowed;
        color: #ccc;
        &:hover,
        &:focus-within {
            border-color: var(--cui-default-border);
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    }
    
    &.cm-input-large {
        height: var(--height-control-large);
        border-radius: calc(var(--cui-border-radius-small) + 1px);
        .cm-input{
            font-size: 16px;
            padding: 6px 7px;
            border-radius: calc(var(--cui-border-radius-small) + 2px);
        }
    }
    &.cm-input-small {
        height: var(--height-control-small);
        border-radius: calc(var(--cui-border-radius-small) - 1px);
        .cm-input{
            padding: 1px 7px;
            height: calc(var(--height-control-small) - 2px);
            border-radius: var(--cui-border-radius-small);
        }
    }
    &.cm-input-hidden {
        display: none;
    }
    &.cm-textarea {
        height: auto;
    }
}
.cm-input {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 0;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 14px;
    border-radius: var(--cui-border-radius-small);
    color: var(--cui-color-text-1);
    background-color: transparent;
    background-image: none;
    position: relative;
    cursor: text;
    outline: none;

    &[disabled] {
        background-color: var(--cui-color-disabled-bg);;
        opacity: 1;
        cursor: not-allowed;
        color: var(--cui-color-disabled-text);
        &:hover,
        &:focus {
            border-color: var(--cui-default-border);
        }
    }

    &::-webkit-input-placeholder {
        color: var(--cui-color-disabled-text);
    }
    &:-moz-placeholder{
        color: var(--cui-color-disabled-text);
    }
    &::-ms-input-placeholder{
        color: var(--cui-color-disabled-text);
    }
    &:-webkit-autofill {
        -webkit-box-shadow: 0 0 5px 500px var(--cui-color-bg-0) inset;
        box-shadow: 0 0 5px 500px var(--cui-color-bg-0) inset;
        -webkit-text-fill-color: var(--cui-color-text-0);
    }
}
textarea.cm-input{
    resize: vertical;
    vertical-align: bottom; 
}
.cm-input-auto-height {
    textarea {
        resize: none;
    }
}
.cm-input-prefix, .cm-input-suffix {
    padding: 0 9px;
    text-align: center;
    z-index: 1;
    color: var(--cui-color-text-2);
    > svg {
        width: 16px;
        height: var(--height-control-default);
        color: var(--cui-color-text-2);
        user-select: none;
        margin-top: 0;
    }
    > i {
        font-size: 16px;
        line-height: var(--height-control-default);
        color: var(--cui-color-text-2);
        user-select: none;
    }
}
.cm-input-suffix {
    left: auto;
    right: 0;
}
.cm-textarea {
    .cm-input-prefix, .cm-input-suffix {
        position: absolute;
        bottom: 2px;
    }
}
.cm-input-group {
    display: table;
    width: 100%;
    border-collapse: separate;
    position: relative;
    font-size: 14px;
    top: 1px;
}
.cm-input-group-append,
.cm-input-group-prepend{
    padding: 4px 8px;
    font-size: inherit;
    font-weight: 400;
    color: var(--cui-color-text-1);
    text-align: center;
    background-color: var(--cui-color-bg-2);
    border-radius: 2px;
    white-space: nowrap;
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.cm-input-group-prepend {
    border-right: 1px solid var(--cui-default-border);
}
.cm-input-group-append {
    border-left: 1px solid var(--cui-default-border);
}

.cm-input-group-prepend,
.cm-input-group>.cm-input:first-child {
    border-bottom-right-radius: 0!important;
    border-top-right-radius: 0!important;
}

.cm-input-group-append,
.cm-input-group>.cm-input:last-child {
    border-bottom-left-radius: 0!important;
    border-top-left-radius: 0!important;
}

.cm-input-group-with-prepend .cm-input,
.cm-input-group-with-prepend.cm-input-small .cm-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cm-input-group-with-append .cm-input,
.cm-input-group-with-append.cm-input-small .cm-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cm-input-search {
    cursor: pointer;
    padding: 0 16px!important;
    background: var(--cui-color-primary)!important;
    color: #fff!important;
    border-color: var(--cui-color-primary)!important;
    transition: all .2s ease-in-out;
    position: relative;
    z-index: 2;
    svg {
        width: 16px;
        height: 16px;
    }
    i {
        font-size: 16px;
    }
    &:before{
        content: "";
        display: block;
        width: 1px;
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: -1px;
        background: inherit;
    }
    &:hover {
        background: var(--cui-color-primary-hover) !important;
        border-color: var(--cui-color-primary-hover)!important;
    }
}

.cm-input-clear{
    width: 16px;
    opacity: 0;
    font-size: 16px;
    text-align: center;
    color: #808695;
    position: absolute;
    right: 8px;
    z-index: 3;
    cursor: pointer;
    background: #fff;
    transition: opacity 0.2s linear;
}

.cm-input-wrapper:hover{
    .cm-input-clear{
        opacity: 1;
        display: inline-block;
    }
}