:host {
  display: flex;
  --wcs-radio-group-gap: var(--wcs-semantic-spacing-base);
  --wcs-radio-group-option-height: var(--wcs-semantic-size-m);
  --wcs-radio-group-option-gap: var(--wcs-semantic-spacing-small);
  --wcs-radio-group-option-padding: var(--wcs-semantic-spacing-small) var(--wcs-semantic-spacing-small);
  --wcs-radio-group-option-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-radio-group-option-background-color: var(--wcs-semantic-color-background-surface-accent-lightest);
}

:host([mode=radio]) {
  flex-direction: column;
  gap: var(--wcs-radio-group-gap);
}

:host([mode=option]) {
  box-sizing: border-box;
  height: var(--wcs-radio-group-option-height);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wcs-radio-group-option-gap);
  padding: var(--wcs-radio-group-option-padding);
  background-color: var(--wcs-radio-group-option-background-color);
  border-radius: var(--wcs-radio-group-option-border-radius);
}

:host([mode=horizontal]) {
  justify-content: space-between;
}