@import './var.styl'

//- input style
input[type="date"],input[type="email"],input[type="text"],input[type="url"],input[type="number"],input[type="digit"],input[type="password"], input:not([type]), textarea, select, .oc-ipt-result
    border 1px solid #cccccc
    border-radius 4px
    padding 6px 10px
    font-size 12px
    // line-height 1.42857143
    color #666
    transition border-color ease-in-out .15s, box-shadow ease-in-out .15s
    vertical-align middle
    box-shadow none
    &:focus
        outline none
        border 1px solid #4461ef
        box-shadow 0 0 4px #7fb3ed
    &[disabled], &[readonly]
        background #eee
        cursor default
input[type="date"],input[type="text"],input[type="url"],input[type="number"],input[type="digit"],input[type="password"], select
    height 32px
    &.sm
        height 28px
    &.xs
        height 22px
// input:required:invalid
//     border-color #c90c0d

.radio, .cbx
    >input
        margin-right 5px
        font-size inherit

select
    padding 0 10px
    background $selectBackground
    appearance none
    -webkit-appearance none
    -moz-appearance none
    -o-appearance none
    -ms-appearance none
    background-size 16px
    padding-right 20px

//输入框后面带单位的情况
input.iptPrefix, .oc-ipt-result.iptPrefix
    border-top-right-radius 0
    border-bottom-right-radius 0
.btnPrefix
    border-top-left-radius 0
    border-bottom-left-radius 0
    margin-left -1px
    
.formSm 
    .oc-ipt-result 
        height 28px
.formSm .oc-ipt-result.multipleLine
    height auto !important
    min-height 28px
.oc-ipt-result 
    position relative
    display block
    height 32px
    white-space nowrap
    vertical-align middle
    background $selectBackground
    appearance none
    -webkit-appearance none
    -moz-appearance none
    -o-appearance none
    -ms-appearance none
    background-size 16px
    padding 3px 7px
    padding-right 22px
    max-width 100%
    width 100%
    overflow hidden
    text-overflow ellipsis
    .oc-ipt-tip
        height 100%
        display flex
        align-items center
    &.showClearAll
        background-image url('')
        i.oc-select-clear-icon
            color #aaa
            cursor pointer
            padding 0px 3px
            position absolute
            z-index 9
            top 50%
            right 5px
            transform translateY(-50%)
            font-size 14px
            &:hover
                color #001689
    &.multipleLine
        min-height 32px
        height auto !important
        white-space pre-line
    
    >.oc-ipt-result-inner
        width 100%
        height 100%
        position relative
        overflow hidden
        display flex
        flex-direction row
        align-items center
        &.multipleLine
            flex-wrap wrap
        .oc-ipt-result-content
            // margin 7px
            
    >span, >.oc-ipt-result-inner>span
        display inline-block
        padding 0 5px
        vertical-align middle
        height 95%
        margin-right 4px
        background $light-blue
        border-radius 2px
        color #2639a0
        margin-bottom 2px
        >i 
            margin-left 5px
            color $brand-blue
            cursor pointer
            font-size 14px
            line-height 12px
            vertical-align middle
            &:focus
                outline none
            &:hover
                color $brand-blue