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

// Ionic Header
// --------------------------------------------------

ion-header {
  z-index: 10; // TODO(ROU-10853): replace this value with a layer token.

  &.header-divider {
    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
  }
}

ion-toolbar + ion-toolbar {
  --padding-start: #{globals.$ion-space-400};
  --padding-end: #{globals.$ion-space-400};
}

@supports (backdrop-filter: blur(0)) {
  .header-background {
    @include globals.position(0, 0, 0, 0);

    position: absolute;

    backdrop-filter: saturate(180%) blur(globals.$ion-scale-100);
  }
  .header-translucent-ionic ion-toolbar {
    --opacity: 0.7;
  }
}