<template>
    <div class="ks-button-group">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name:'GroupButton',
    data(){
        return{
            
        }
    },
    methods:{
    },
    mounted(){
    }
}
</script>
<style scoped>
    .ks-button-group {
        display: inline-block;
        vertical-align: middle;
    }
    .ks-button-group .ks-button--primary:first-child {
        border-right-color: hsla(0,0%,100%,.5);
    }

    .ks-button-group>.ks-button:not(:last-child) {
        margin-right: -1px;
    }
    .ks-button-group>.ks-button:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .ks-button-group>.ks-button {
        float: left;
        position: rksative;
    }
    .ks-button-group .ks-button--primary:last-child {
        border-left-color: hsla(0,0%,100%,.5);
    }
    .ks-button-group>.ks-button:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .ks-button-group>.ks-button+.ks-button {
        margin-left: 0;
    }
    .ks-button-group .ks-button--primary:not(:first-child):not(:last-child) {
        border-left-color: hsla(0,0%,100%,.5);
        border-right-color: hsla(0,0%,100%,.5);
    }

    .ks-button-group>.ks-button:not(:first-child):not(:last-child) {
        border-radius: 0;
    }
</style>
