@import "./header";
@import "./header.ios.vars";

// iOS Header
// --------------------------------------------------

.header-ios ion-toolbar:last-of-type {
  --border-width: 0 0 #{$hairlines-width};
}

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

    position: absolute;

    backdrop-filter: $header-ios-translucent-filter;
  }
  .header-translucent-ios ion-toolbar {
    --opacity: .8;
  }

  /**
   * Disable the saturation otherwise it distorts the content
   * background color when large header is not collapsed
   */
  .header-collapse-condense-inactive .header-background {
    backdrop-filter: blur($header-ios-blur);
  }
}

.header-ios.ion-no-border ion-toolbar:last-of-type {
  --border-width: 0;
}

// iOS Header - Collapse Fade
// --------------------------------------------------
.header-collapse-fade ion-toolbar {
  --opacity-scale: inherit;
}

// iOS Header - Collapse Condense
// --------------------------------------------------
.header-collapse-condense {
  z-index: 9;
}

.header-collapse-condense ion-toolbar {
  position: sticky;
  top: 0;
}

.header-collapse-condense ion-toolbar:first-of-type {
  padding-top: 7px;

  z-index: 1;
}

/**
 * Large title toolbar should just use the content background
 * since it needs to blend in with the header above it.
 */
.header-collapse-condense ion-toolbar {
  --background: var(--ion-background-color, #fff);

  z-index: 0;
}

.header-collapse-condense ion-toolbar:last-of-type {
  --border-width: 0px;
}

.header-collapse-condense ion-toolbar ion-searchbar {
  height: 48px;

  padding-top: 0px;
  padding-bottom: 13px;
}


.header-collapse-main {
  --opacity-scale: 1;
}

.header-collapse-main ion-toolbar {
  --opacity-scale: inherit;
}

.header-collapse-main ion-toolbar.in-toolbar ion-title,
.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
  transition: all 0.2s ease-in-out;
}

.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
  opacity: 0;
  pointer-events: none;
}

/**
 * There is a bug in Safari where changing
 * the opacity of an element in a scrollable container
 * while rubber-banding causes the scroll position
 * to jump to the top
 */
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
  visibility: hidden;
}