//
// 表单
// ============================================================

// input、textarea
// -----------------------------------------------------------
=input-textarea($tabName)
    @extend .col-12
    @extend .color-gray
    @extend .padding-right-md
    @extend .padding-left-md
    @extend .border

    &::-webkit-input-placeholder
        @extend .color-gray-light

    &.#{$tabName}-focus
        &:focus
            @extend .transition-1s
            @extend .border-color

    @each $status in $input-status
        &.#{$tabName}-#{$status}
            @if $tabName == "input"
                @extend .color-#{$status}

            @extend .border-color-#{$status}


// radio、checkbox
// -----------------------------------------------------------
=radio-checkbox($class, $icon)
    .#{$class}-wrapper
        .#{$class}-group
            @extend .clear-both
            @extend .display-inline-block
            @extend .cursor-pointer
            @extend .margin-right-lg
            @extend .transition-1s
            &:last-of-type
                @extend .margin-left

            .#{$class}-text
                @extend .float-left
                @extend .margin-left-sm

            &:hover, &[data-#{$class}-checked=true]
                @extend .color

            .iconfont
                @extend .float-left
                @extend .margin-right-sm
                @extend .font-size-md
                @extend .line-height-1


            // 禁用状态
            &.disabled
                @extend .background-transparent


// button
// -----------------------------------------------------------
// 按钮
=button-hover-active($color, $hoverVal, $activeVal)
    &:hover, &.active
        border-color: darken($color, $hoverVal)
        background-color: darken($color, $hoverVal)
    &:active
        border-color: lighten($color, $activeVal)
        background-color: lighten($color, $activeVal)

// 白色按钮
=button-white-hover-active($styleName)
    &:hover, &.active
        border-color: $border-color-default
        color: darken($color-gray, 20%)
        background: #f9f9f9 !important

    &:active
        color: lighten($color-gray, 10%)
        background: #f5f5f5 !important

// 按钮颜色
=button-color()
    @each $styleName, $styleVal in $button-color
        @if $styleName == white
            &.button-#{$styleName}
                @extend .background-#{$styleName}
                border-color: $border-color-default
                @extend .color-gray
                +button-white-hover-active($styleName)

        @else
            &.button-#{$styleName}
                @extend .color-white
                @extend .background-#{$styleName}
                @extend .border-color-#{$styleName}
                +button-hover-active($styleVal, 10%, 5%)

// 线框按钮hover/active
=button-wireframe-hover-active($color, $hoverVal, $activeVal)
    &:hover, &.active
        border-color: $color
        color: white
        background: $color !important

    &:active
        color: white
        background: lighten($color, 5%) !important

// 线框按钮
=button-wireframe()
    &.button-wireframe
        @extend .color
        +button-wireframe-hover-active($color-default, 20%, 10%)

    @each $styleName, $styleVal in $button-color
        @if $styleName == white
            &.button-wireframe
                &.button-white
                    @extend .color-gray
                    +button-white-hover-active($styleName)
        @else
            &.button-wireframe
                &.button-#{$styleName}
                    @extend .color-#{$styleName}
                    +button-wireframe-hover-active($styleVal, 20%, 5%)

// 按钮组圆角
=button-group-radius($styleVal)
    .button
        &:first-of-type
            border-top-left-radius: $styleVal
            border-bottom-left-radius: $styleVal
        &:last-of-type
            border-top-right-radius: $styleVal
            border-bottom-right-radius: $styleVal


// 按钮尺寸
=button-input-size($styleName)
    &.#{$styleName}-sm, &.#{$styleName}-xs
        @extend .line-height-1

    &.#{$styleName}-sm
        @extend .padding-top-sm
        @extend .padding-bottom-sm
        +px(height, 25px)

    &.#{$styleName}-xs
        +px(height, 19px)
        +px(padding, 2px, 5px)