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

@include b(radio-group) {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0;

  @include when(vertical) {
    flex-direction: column;
    align-items: stretch;
  }

  @include when(segment) {
    padding: 6px;
    border-radius: getCssVar('border-radius', 'lg');
    background-color: getCssVar('color-neutral-1');
  }

  @include m(large) {
    @include when(segment) {
      padding: 8px;
      border-radius: getCssVar('border-radius', 'xl');
    }
  }

  @include m(small) {
    @include when(segment) {
      padding: 4px;
      border-radius: getCssVar('border-radius', 'md');
    }
  }
}