ion-header.native-header {
  &:not(.scroll-header-hidden) {
    & > ion-toolbar {
      --border-color: transparent;
    }

    box-shadow: none;
  }
}

ion-content,
ion-content > cdk-virtual-scroll-viewport {
  ion-header {
    opacity: 1;

    & > ion-toolbar {
      &.large {
        padding-top: 20px;
        ion-title,
        ion-text.title {
          font-size: 1.5rem;
          font-weight: bold;
        }
        ion-buttons[slot='end'] {
          margin-right: 8px;
        }
      }
    }
  }

  &:not(.scroll-header-fixed) {
    &.scroll-header-sticky {
      ion-header {
        position: sticky;
        top: 0;
        will-change: transform, opacity;
      }
      &.scroll-header-animated {
        ion-header {
          transition:
            transform 0.4s ease 0s,
            opacity 0.4s ease 0s;
        }
      }

      &:not(.scroll-header-hidden) {
        ion-header {
          transform: translate3d(0, 0, 0);
        }
      }
    }

    &:not(.scroll-header-sticky).scroll-header-no-border {
      ion-header {
        box-shadow: none;
        & > ion-toolbar {
          --border-color: transparent;
        }
      }
    }

    &.scroll-header-hidden {
      ion-header {
        transform: translate3d(0, -100%, 0);
        opacity: 0.2;
      }
    }
  }
}