/*!
 * Copyright (C) 2023 StApps
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */
$overscroll-padding: 720px;
$parallax-strength: 2;
$default-parallax-content-size: 230px;

ion-content::part(parallax-scroll) {
  perspective: 2px;
  perspective-origin: center top;
}

ion-content::part(parallax-parent) {
  position: relative;
  transform-style: preserve-3d;

  display: flex;
  flex-direction: column;

  height: 100%;
}

ion-content::part(parallax) {
  $translate-y: calc($overscroll-padding * $parallax-strength);
  $translate-z: calc(-1px * $parallax-strength);
  $transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);

  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform-origin: 50% $transform-origin;
  transform: translate3d(0, $translate-y, $translate-z) scale($parallax-strength);

  width: 150%;
  height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);

  background: var(--parallax-background, var(--ion-color-primary));
}
