@use "../../themes/ionic/ionic.globals.scss" as globals;
@import "./list-header.common";

:host {
  --background: transparent;
  --color: #{globals.$ion-text-default};

  @include globals.typography(globals.$ion-body-md-medium);

  min-height: calc(#{globals.$ion-scale-1400} + #{globals.$ion-scale-050});

  /**
   * The focus rings from components like buttons and links
   * are being cut off. This style ensures that the focus ring
   * is completely visible.
   */
  overflow: visible;

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

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

:host(.ion-color) {
  background: current-color(base);
  color: current-color(contrast);
}

// List Header: Slotted Components
// --------------------------------------------------

// Label
::slotted(ion-label) ::slotted(p) {
  font-weight: globals.$ion-font-weight-regular;
}