@use "../../themes/ionic/ionic.globals" as globals;
@import "./radio-group.common";

// Ionic Radio Group Top
// --------------------------------------------------

.radio-group-top {
  @include globals.typography(globals.$ion-body-sm-medium);
}

.radio-group-top .error-text {
  color: globals.$ion-text-danger;
}

.radio-group-top .helper-text {
  color: globals.$ion-text-subtlest;
}

// Radio Group Top: in List
// --------------------------------------------------

// Add padding to the error and helper text when used in a
// list to align them with the list header and item text.
:host(.in-list) .radio-group-top {
  /* stylelint-disable */
  @include globals.ltr() {
    padding-right: globals.$ion-space-400;
    padding-left: calc(globals.$ion-space-400 + var(--ion-safe-area-left, 0px));
  }

  @include globals.rtl() {
    padding-right: calc(globals.$ion-space-400 + var(--ion-safe-area-right, 0px));
    padding-left: globals.$ion-space-400;
  }
  /* stylelint-enable */
}