//
// 按钮
// ============================================================

// 普通按钮
.button
    @extend .display-inline-block
    @extend .padding-right-lg
    @extend .padding-left-lg
    @extend .color-white
    @extend .border
    @extend .border-color
    @extend .background
    @extend .input-height
    @extend .cursor-pointer
    @extend .transition-1s
    @extend .white-space-nowrap

    +button-hover-active($color-default, 10%, 5%)

    // 颜色按钮（状态按钮）
    +button-color

    // 线框按钮
    +button-wireframe

    // 链接按钮
    &.button-link
        @extend .color-gray
        border-color: transparent !important
        +button-white-hover-active(white)

    &.button-wireframe, &.button-link
        @extend .background-transparent

    // 按钮尺寸
    +button-input-size(button)

// 按钮组
.button-group
    @extend .display-inline-block

    .button
        &:nth-of-type(n+2)
            +px(margin-left, -1px)
            border-left-color: white

        &.button-white
            border-left-color: $border-color-default

        &.button-wireframe
            &.button-white
                border-left-color: $border-color-default

    .button-wireframe
        &.button
            &:nth-of-type(n+2)
                +px(margin-left, -1px)
                border-left-color: $color-default

    @each $styleName, $styleVal in $button-color
        .button-#{$styleName}, .button-wireframe
            &:hover, &:active
                @extend .border-color-#{$styleName}

        .button-wireframe
            @if $styleName == white
                &.button-#{$styleName}
                    border-left-color: $border-color-default !important
            @else
                &.button-#{$styleName}
                    border-left-color: $styleVal !important

    // 圆角、椭圆
    &.border-radius, &.border-round
        border-radius: 0

    &.border-radius
        +button-group-radius($border-radius)

    &.border-round
        border-radius: 0
        +button-group-radius($border-round)

// 按钮组工具栏
.button-toolbar
    .button-group
        @extend .margin-right-sm
        &:last-of-type
            @extend .margin-right