:root {
  --slide-up-distance: 50px;
  --slide-down-distance: var(--slide-up-distance);
  --os-animate-duration: 0.5s;
  --os-delay-step: 0.05s;
  --os-delay-base: 0.2s;
}

.os-animate {
  &.os-activated,
  .os-activated {
    &.to-slide-up,
    .to-slide-up,
    &.to-slide-down,
    .to-slide-down {
      opacity: 1;
      transform: translateY(0);
    }

    &.to-fade-in,
    .to-fade-in {
      opacity: 1;
    }
  }

  &.to-slide-up,
  .to-slide-up {
    opacity: 0;
    transform: translateY(var(--slide-up-distance));
  }

  &.to-slide-down,
  .to-slide-down {
    opacity: 0;
    transform: translateY(calc(var(--slide-down-distance) * -1));
  }

  &.to-fade-in,
  .to-fade-in {
    opacity: 0;
  }

  &.to-slide-up,
  .to-slide-up,
  &.to-slide-down,
  .to-slide-down,
  &.to-fade-in,
  .to-fade-in {
    transition:
      opacity var(--os-animate-duration),
      transform var(--os-animate-duration);

    &[os-delay="0"] {
      transition-delay: var(--os-delay-base);
    }

    &[os-delay="1"] {
      transition-delay: calc(var(--os-delay-step) * 1 + var(--os-delay-base));
    }

    &[os-delay="2"] {
      transition-delay: calc(var(--os-delay-step) * 2 + var(--os-delay-base));
    }

    &[os-delay="3"] {
      transition-delay: calc(var(--os-delay-step) * 3 + var(--os-delay-base));
    }

    &[os-delay="4"] {
      transition-delay: calc(var(--os-delay-step) * 4 + var(--os-delay-base));
    }

    &[os-delay="5"] {
      transition-delay: calc(var(--os-delay-step) * 5 + var(--os-delay-base));
    }

    &[os-delay="6"] {
      transition-delay: calc(var(--os-delay-step) * 6 + var(--os-delay-base));
    }

    &[os-delay="7"] {
      transition-delay: calc(var(--os-delay-step) * 7 + var(--os-delay-base));
    }

    &[os-delay="8"] {
      transition-delay: calc(var(--os-delay-step) * 8 + var(--os-delay-base));
    }

    &[os-delay="9"] {
      transition-delay: calc(var(--os-delay-step) * 9 + var(--os-delay-base));
    }

    &[os-delay="10"] {
      transition-delay: calc(var(--os-delay-step) * 10 + var(--os-delay-base));
    }

    &[os-delay="11"] {
      transition-delay: calc(var(--os-delay-step) * 11 + var(--os-delay-base));
    }

    &[os-delay="12"] {
      transition-delay: calc(var(--os-delay-step) * 12 + var(--os-delay-base));
    }

    &[os-delay="13"] {
      transition-delay: calc(var(--os-delay-step) * 13 + var(--os-delay-base));
    }

    &[os-delay="14"] {
      transition-delay: calc(var(--os-delay-step) * 14 + var(--os-delay-base));
    }

    &[os-delay="15"] {
      transition-delay: calc(var(--os-delay-step) * 15 + var(--os-delay-base));
    }

    &[os-delay="16"] {
      transition-delay: calc(var(--os-delay-step) * 16 + var(--os-delay-base));
    }

    &[os-delay="17"] {
      transition-delay: calc(var(--os-delay-step) * 17 + var(--os-delay-base));
    }

    &[os-delay="18"] {
      transition-delay: calc(var(--os-delay-step) * 18 + var(--os-delay-base));
    }

    &[os-delay="19"] {
      transition-delay: calc(var(--os-delay-step) * 19 + var(--os-delay-base));
    }

    &[os-delay="20"] {
      transition-delay: calc(var(--os-delay-step) * 20 + var(--os-delay-base));
    }

    &[os-delay="21"] {
      transition-delay: calc(var(--os-delay-step) * 21 + var(--os-delay-base));
    }
  }
}

.os-out {
  &.os-out-active,
  .os-out-active {
    &.to-slide-out,
    .to-slide-out {
      opacity: 0;
      transform: translateY(calc(var(--slide-up-distance) * -1));
    }

    &.to-fade-out,
    .to-fade-out {
      opacity: 0;
    }
  }

  &.to-slide-out,
  .to-slide-out {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--os-animate-duration),
      transform var(--os-animate-duration);
  }

  &.to-fade-out,
  .to-fade-out {
    transform: translateY(0);
    transition:
      opacity var(--os-animate-duration),
      transform var(--os-animate-duration);
  }

  /* Resting state for fade-out — only after enter (avoids fighting to-fade-in) */
  &.os-activated:not(.os-out-active) .to-fade-out,
  &.os-activated:not(.os-out-active).to-fade-out {
    opacity: 1;
  }

  &.to-slide-out,
  .to-slide-out,
  &.to-fade-out,
  .to-fade-out {
    &[os-delay="0"] {
      transition-delay: var(--os-delay-base);
    }

    &[os-delay="1"] {
      transition-delay: calc(var(--os-delay-step) * 1 + var(--os-delay-base));
    }

    &[os-delay="2"] {
      transition-delay: calc(var(--os-delay-step) * 2 + var(--os-delay-base));
    }

    &[os-delay="3"] {
      transition-delay: calc(var(--os-delay-step) * 3 + var(--os-delay-base));
    }

    &[os-delay="4"] {
      transition-delay: calc(var(--os-delay-step) * 4 + var(--os-delay-base));
    }

    &[os-delay="5"] {
      transition-delay: calc(var(--os-delay-step) * 5 + var(--os-delay-base));
    }

    &[os-delay="6"] {
      transition-delay: calc(var(--os-delay-step) * 6 + var(--os-delay-base));
    }

    &[os-delay="7"] {
      transition-delay: calc(var(--os-delay-step) * 7 + var(--os-delay-base));
    }

    &[os-delay="8"] {
      transition-delay: calc(var(--os-delay-step) * 8 + var(--os-delay-base));
    }

    &[os-delay="9"] {
      transition-delay: calc(var(--os-delay-step) * 9 + var(--os-delay-base));
    }

    &[os-delay="10"] {
      transition-delay: calc(var(--os-delay-step) * 10 + var(--os-delay-base));
    }

    &[os-delay="11"] {
      transition-delay: calc(var(--os-delay-step) * 11 + var(--os-delay-base));
    }

    &[os-delay="12"] {
      transition-delay: calc(var(--os-delay-step) * 12 + var(--os-delay-base));
    }

    &[os-delay="13"] {
      transition-delay: calc(var(--os-delay-step) * 13 + var(--os-delay-base));
    }

    &[os-delay="14"] {
      transition-delay: calc(var(--os-delay-step) * 14 + var(--os-delay-base));
    }

    &[os-delay="15"] {
      transition-delay: calc(var(--os-delay-step) * 15 + var(--os-delay-base));
    }

    &[os-delay="16"] {
      transition-delay: calc(var(--os-delay-step) * 16 + var(--os-delay-base));
    }

    &[os-delay="17"] {
      transition-delay: calc(var(--os-delay-step) * 17 + var(--os-delay-base));
    }

    &[os-delay="18"] {
      transition-delay: calc(var(--os-delay-step) * 18 + var(--os-delay-base));
    }

    &[os-delay="19"] {
      transition-delay: calc(var(--os-delay-step) * 19 + var(--os-delay-base));
    }

    &[os-delay="20"] {
      transition-delay: calc(var(--os-delay-step) * 20 + var(--os-delay-base));
    }

    &[os-delay="21"] {
      transition-delay: calc(var(--os-delay-step) * 21 + var(--os-delay-base));
    }
  }
}