@use 'sass:map';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;

@include b(button-group) {
  display: inline-flex;
  align-items: stretch;
  padding: 0 12px;

  border-radius: getCssVar('border-radius-lg');
  background-color: getCssVar('color-neutral-3');

  @include when(compact) {
    padding: 0;

    .#{$namespace}-button {
      &:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  @include when(rounded) {
    border-radius: getCssVar('border-radius-max');
    background-color: getCssVar('color-neutral-2');
  }

  @include m(large) {
    border-radius: getCssVar('border-radius-xl');
  }

  @include m(small) {
    border-radius: getCssVar('border-radius-md');
  }
}