@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./accordion-group.common";

// Ionic Accordion Group
// --------------------------------------------------

:host {
  min-width: calc(#{globals.$ion-scale-6200} + #{globals.$ion-space-600});

  background-color: globals.$ion-bg-neutral-subtlest-default;
}

// Inset Accordion Group
// --------------------------------------------------
// Shape and padding only apply if the group is inset

:host(.accordion-group-expand-inset) {
  @include globals.padding(globals.$ion-space-100);
}

:host(.accordion-group-expand-inset.accordion-group-shape-round) {
  --border-radius: #{globals.$ion-round-xl};

  @include globals.border-radius(globals.$ion-round-xl);
}

:host(.accordion-group-expand-inset.accordion-group-shape-soft) {
  --border-radius: #{globals.$ion-soft-xl};

  @include globals.border-radius(globals.$ion-soft-xl);
}

:host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
  --border-radius: #{globals.$ion-rectangular-xl};

  @include globals.border-radius(globals.$ion-rectangular-xl);
}