@require('./variables.styl')

// FormItem
.k-form-item:not(:last-of-type)
    margin $form-item-margin
.k-form-item
    display table 
    position relative
    table-layout fixed
    // fluid
    &.k-fluid
        width 100%
    > .k-label
        display table-cell
        width $form-item-label-width 
        text-align $form-item-label-text-align 
        padding-right $form-item-label-padding-right 
        line-height $form-item-label-line-height
        > .k-star
            color $form-item-star-color 
            margin-right $form-item-star-margin-right 
    > .k-content
        display table-cell
        vertical-align middle
        line-height 1

    // slider
    .k-slider.k-show-end
        .k-slider-wrapper
            margin-bottom 0

    // invalid 
    .k-error
        position absolute
        color $form-item-error-color 
        font-size $form-item-error-font-size 
        margin $form-item-error-margin
        white-space nowrap
    &.k-invalid
        // input
        :not(.k-select) .k-input
            .k-inner
                border $form-item-invalid-border
        // select
        .k-select
            > .k-wrapper
                border $form-item-invalid-border

    // nested
    .k-form-item
        display block 
        width auto
        // maybe has `append`
        // .k-content
        //    display block

    // append
    > .k-append
        display table-cell
        padding $form-item-append-padding
        vertical-align middle

.k-form
    // layout: inline
    &.k-inline
        .k-form-item
            display inline-block
            vertical-align top
            margin-right $form-item-inline-margin-right 
            > .k-label
                width auto
    // layout: vertical
    &.k-vertical
        .k-form-item
        .k-form-item > .k-label
        .k-form-item > .k-content
            display block
        .k-form-item > .k-label
            width auto
            text-align left
            line-height inherit
            margin-bottom $form-item-vertical-label-margin-bottom 


requireTheme('form')