/*
* @category container
* @component button-group
* @design collaboration-design
*/

@import 'core';
@import 'colors';
@import '../tools/functions/core';

$button-group__class: '#{$prefix}-button-group';

$button-group__font-size: rem-calc(12);
$button-group__border-size: rem-calc(1);
$button-group__border: $button-group__border-size solid $gray-6;
$button-group__color: $black;
$button-group__background: transparent;
$button-group__line-height: rem-calc(16);
$button-group__padding: rem-calc(8) rem-calc(18);
$button-group-active__color: $white;
$button-group-active__background: $black-48;
$button-group-disabled__color: $gray-3;
$button-group-hover__background: $black-04;
$button-group__border-radius-pill: rem-calc(25);
$button-group__border-radius: rem-calc(4);
$button-group-icon__padding: rem-calc(10);


$button-group__font-size--dark: rem-calc(14);
$button-group__line-height--dark: rem-calc(22);
$button-group__padding--dark: rem-calc(5) rem-calc(18);
$button-group__border--dark: $button-group__border-size solid $gray-space;
$button-group__color--dark: $white;
$button-group-active__color--dark: $white;
$button-group-active__background--dark: $gray-space;
$button-group-disabled__color--dark: $gray-2;
$button-group-hover__background--dark: $white-12;