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

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

:host {
  position: relative;
}

// The border is added to the ::after element
// to properly inset the border relative to the entire
// accordion, rather than just the header.
:host::after {
  @include globals.margin(null, globals.$ion-space-400, null, globals.$ion-space-400);
  @include globals.position(null, 0, 0, 0);

  display: block;

  position: absolute;

  height: globals.$ion-border-size-025;

  background-color: globals.$ion-border-default;

  content: "";

  z-index: 3;
}

// Hide the divider for the last accordion item
:host(.accordion-last)::after {
  display: none;
}

:host(.accordion-animated) {
  transition: all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
}

:host(.accordion-animated) #content {
  transition: max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);
}

// Accordion Header
// --------------------------------------------------

// The border is removed from the item in the header because
// we are adding a border to the ::after element of the accordion.
::slotted(ion-item[slot="header"]) {
  --border-radius: inherit;
  --color: #{globals.$ion-text-default};
  --border-width: #{globals.$ion-border-size-0};
  --inner-border-width: #{globals.$ion-scale-0};
  --min-height: #{globals.$ion-scale-700};
  --padding-top: #{globals.$ion-space-300};
  --padding-end: #{globals.$ion-space-400};
  --padding-bottom: #{globals.$ion-space-300};
  --padding-start: #{globals.$ion-space-400};
  --background-activated: #{globals.$ion-bg-neutral-subtlest-press};

  @include globals.typography(globals.$ion-heading-h6-medium);
}

// Accordion Content
// --------------------------------------------------

#content-wrapper {
  @include globals.padding(globals.$ion-space-300, globals.$ion-space-400);
  @include globals.typography(globals.$ion-body-md-regular);

  color: globals.$ion-text-default;
}

// Disabled Accordion
// --------------------------------------------------

:host(.accordion-disabled)::before {
  @include globals.border-radius(inherit);
  @include globals.disabled-state();

  z-index: 2;
}