@telekom/scale-components/dist/collection/components/radio-button-group/radio-button-group.css

Scale is the digital design system for Telekom products and experiences.

:host {
  /*label*/
  --font-weight-label: var(--telekom-typography-font-weight-medium);
  --font-size-label: var(--telekom-typography-font-size-body);

  /*helper-text*/
  --font-size-helper-text: var(--telekom-typography-font-size-small);
  --color-helper-text: var(
    --telekom-color-text-and-icon-functional-informational
  );
  --padding-bottom-helper-text: var(--telekom-spacing-composition-space-04);
  --margin-top-helper-text: var(--telekom-spacing-composition-space-03);
  --font-size-helper-text: var(--telekom-typography-font-size-small);
  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);

  /*helper-text--status-error*/
  --font-size-error-helper-text: var(--telekom-typography-font-size-small);
  --color-error-helper-text: var(
    --telekom-color-text-and-icon-functional-danger
  );
  --padding-bottom-error-helper-text: var(
    --telekom-spacing-composition-space-04
  );
  --margin-top-error-helper-text: var(--telekom-spacing-composition-space-03);
  --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium);
  --color-error-helper-text-hcm: var(
    --telekom-color-text-and-icon-white-standard
  );
  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);

  /*title*/
  --font-size-title: var(--font-size-label);
  --font-weight-title: var(--telekom-typography-font-weight-medium);
  --padding-bottom-title: var(--telekom-spacing-composition-space-03);
  --margin-left-title: var(--telekom-spacing-composition-space-02);

  /*slotted items*/
  --margin-top-slotted-item: var(--telekom-spacing-composition-space-05);

  margin-top: var(--margin-top-slotted-item);
}

.radio-button-group {
  display: inline-flex;
  flex-direction: column;
  border: 0;
  margin: 0;
  padding: 0;
}

.radio-button-group__container {
  display: flex;
  flex-direction: column;
}

.radio-button-group__helper-text {
  color: var(--color-helper-text);
  font-size: var(--font-size-helper-text);
  font-weight: var(--font-weight-helper-text);
  display: flex;
  align-items: center;
  line-height: var(--line-height-helper-text);
}

.radio-button-group__helper-text--status-error {
  color: var(--color-error-helper-text);
  font-size: var(--font-size-error-helper-text);
  font-weight: var(--font-weight-error-helper-text);
}

.radio-button-group__title {
  margin: 0;
  padding: 0;
}

.radio-button-group__title-label {
  font-size: var(--font-size-title);
  line-height: var(--telekom-typography-line-spacing-standard);
  font-weight: var(--telekom-typography-font-weight-bold);
}

::slotted(*) {
  margin-top: calc(var(--margin-top-slotted-item));
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .radio-button-group__helper-text--status-error {
    color: var(--color-error-helper-text-hcm);
  }
}

.radio-button-group__helper-text scale-icon-alert-success,
.radio-button-group__helper-text scale-icon-alert-warning,
.radio-button-group__helper-text scale-icon-alert-information,
.radio-button-group__helper-text scale-icon-alert-error {
  margin-right: var(--telekom-spacing-composition-space-03);
}