@import "../color/color.scss";
@import '../mixin/_button';

$btn-prefix-cls: lion-btn;

$radius: 4px;
$opcity: 0.8;
$opcity-none: 1;
$radius-circel: 50%;
$radius-radian: 20px;
$border-common: 1px solid $gray-border;
$border-text: 1px solid $yellow;
$pading-default: 10px 20px;
$pading-small: 5px 10px;
$pading-large: 12px 70px;
$pading-circel: 10px;
$pading-group-specail: 3px;
$botton-shadow: 4px 3px 14px #C7C7C7;

// 按钮组
$group-active-border: 1px solid $yellow;

.#{$btn-prefix-cls} {
    @include father-btn;
}


// simple按钮样式
.#{$btn-prefix-cls}-simple {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($gray-common,$white,0,0,none);
        &:hover {
            @include btn-hover($yellow,$white,$opcity-none);
        }
        &:disabled {
            cursor: default;
            &:hover {
                @include btn-hover($gray-common,$white,$opcity-none);
            }
        }
    }
}

// primary 主要
.#{$btn-prefix-cls}-primary {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($white,$yellow,$pading-default,$radius,none);
        &:hover {
            @include btn-hover($white, $yellow,$opcity);
        }
    }
}

// common 通用
.#{$btn-prefix-cls}-common {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($gray-common,$white,$pading-default,$radius,$border-common);
        &:hover {
            @include btn-hover($gray-common, $white, $opcity);
        }
    }
}

// commit 提交
.#{$btn-prefix-cls}-commit {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($white,$red,$pading-default,$radius,none);
        &:hover {
            @include btn-hover($white, $red, $opcity);
        }
    }
}

// text 文本
.#{$btn-prefix-cls}-text {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($yellow,$white,$pading-default,$radius,$border-text);
        &:hover {
            @include btn-hover($yellow, $white, $opcity);
        }
    }
}

// cancel 取消
.#{$btn-prefix-cls}-cancel {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($white,$gary-title,$pading-default,$radius,none);
        &:hover {
            @include btn-hover($white, $gary-title, $opcity);
        }
    }
}

// disabled 禁止
.#{$btn-prefix-cls}-disabled {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($white,$gray-icon,$pading-default,$radius,none);
        &:hover {
            @include btn-hover($white, $gray-icon, $opcity-none);
        }
        cursor: default;
    }
}



// circel 圆形
.#{$btn-prefix-cls}-circel {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($white,$yellow,$pading-circel,$radius-circel,none);
        &:hover {
            @include btn-hover($white, $yellow, $opcity);
        }
    }
}

// radian 大弧度
.#{$btn-prefix-cls}-radian {
    @include father-btn;
    >button {
        @include btn;
        @include btn-common($white,$yellow,$pading-default,$radius-radian,none);
        &:hover {
            @include btn-hover($white, $yellow, $opcity);
        }
        >i {
            display: inline-block;
            margin-right: 5px;
        }
    }
}

// 默认按钮大小
.#{$btn-prefix-cls}-default {
    @extend .#{$btn-prefix-cls}-primary;
    >button {
        @include btn-common-size($pading-default);
    } 
}

// small
.#{$btn-prefix-cls}-small {
    @extend .#{$btn-prefix-cls}-primary;
    >button {
        @include btn-common-size($pading-small);
    } 
}

// large 
.#{$btn-prefix-cls}-large {
    @extend .#{$btn-prefix-cls}-primary;
    >button {
        @include btn-common-size($pading-large);
    } 
}


// 按钮组样式
.#{$btn-prefix-cls}-group{
    @include btn-group;
    .#{$btn-prefix-cls}{
        @include btn-group-item;
    }
}

// 组件按钮选中的状态
.#{$btn-prefix-cls}-group-opt {
    .#{$btn-prefix-cls}-group-opt-active{
        >button {
            @include group-active($group-active-border, $yellow, $white,)
        }
    }
    .#{$btn-prefix-cls}-group-opt-active + div {
        >button {
            border-left: $group-active-border;
        }
    }
}



// 组合按钮竖向排布
.#{$btn-prefix-cls}-group-vertical {
    width: auto;
    .#{$btn-prefix-cls}{
        @include group-vertical;
        >button{
            border-right: $border-common !important;
        }
    }
    .#{$btn-prefix-cls}-group-opt-active + div {
        >button {
            border-top: $group-active-border;
            border-left: $border-common;
        }
    }
   
}

// 面板button组件
.#{$btn-prefix-cls}-group-special {
    padding: $pading-group-specail;
    box-shadow:$botton-shadow;
    -moz-box-shadow:$botton-shadow;
    -webkit-box-shadow:$botton-shadow;
    .#{$btn-prefix-cls} {
        >button {
            border-radius: 0px !important;
            border:none !important;
            &:hover {
                color: $yellow;
            }
            .iconfont {
                display: block;
                margin-bottom: 3px;
            }
        }
        &:not(:first-child):not(:last-child) {
            button {
                border-bottom:$border-common !important;
            }
        }
        &:first-child {
            border-bottom:$border-common !important;
        }
    }
}