@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Input';

$inputChoiceGroupBaseClass: '#{constants.$prefix}input-choice-group';

$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';

.#{$inputChoiceGroupBaseClass} {
  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};

  &,
  legend {
    border: none;
    margin: tokens.$bm-sem-space-0;
    padding: tokens.$bm-sem-space-0;
  }

  &__inputs {
    display: flex;
    gap: tokens.$bm-comp-input-space-choice-gap-items-y
      tokens.$bm-comp-input-space-choice-gap-items-x;
  }

  &--vertical &__inputs {
    flex-direction: column;
  }

  &--horizontal &__inputs {
    flex-wrap: wrap;
    flex-direction: row;
  }

  &--horizontalFluid &__inputs {
    flex-direction: row;
    justify-content: space-between;

    & > *,
    & > ::slotted(*) {
      flex: 1 1 auto;
    }
  }
}