@import "../color/color.scss";
@import "../size/size.scss";

@mixin father-btn {
    display: inline-block;
    margin: $s-10;
}
@mixin btn {
    display: inline-block;
    font-size: $s-14; 
    margin-bottom: 0px;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    outline: none;
    white-space: nowrap;
}

@mixin btn-common ($color,$background,$padding,$radius,$border){
    color: $color;
    border-radius: $radius;
    background: $background;
    padding: $padding;
    border:$border;
}
@mixin btn-common-size ($padding) {
    padding: $padding;
}

@mixin btn-hover($color,$background,$opacity) {
    color: $color;
    background: $background;
    opacity: $opacity;
}

//按钮组mixin
@mixin btn-group {
    display: inline-block;
    margin: 10px;
    width: 100%;
    button {
        .iconfont {
            display: inline-block;
            margin-right: 3px;
        }
    }
}

@mixin btn-group-item {
    margin: 0px;
    &:not(:first-child):not(:last-child) {
        button {
            border-right:none;
            border-radius: 0;
        }
    }
    &:first-child {
        >button{
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px; 
            border-right:none; 
        }
    }
    &:last-child {
        >button{
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px; 
        }
    }
}

// 按钮组被选中的样式
@mixin group-active($border, $background, $color) {
    border: $border;
    background: $background;
    color: $color;
}

// 竖向组合按钮
@mixin group-vertical {
    display: block;
    margin: 0px;
    &:not(:first-child):not(:last-child) {
        button {
            border-bottom:none;
            border-radius: 0;
        }
    }
    &:first-child {
        >button{
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px; 
            border-top-right-radius: 4px; 
            border-bottom:none; 
        }
    }
    &:last-child {
        >button{
            border-top-right-radius: 0px;
            border-top-left-radius: 0px; 
            border-bottom-left-radius: 4px; 
        }
    }
}