/*
 * Copyright (c) 2010, 2026 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
#scout {
  /*** Fade In ***/

  .keyframes-fade-in() {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fade-in {
    .keyframes-fade-in()
  }

  /*** Fade Out ***/

  .keyframes-fade-out() {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes fade-out {
    .keyframes-fade-out();
  }

  /*** Fade In from current ***/

  .keyframes-fade-in-from-current() {
    to {
      opacity: 1;
    }
  }

  @keyframes fade-in-from-current {
    .keyframes-fade-in-from-current()
  }

  /*** Fade Out from current ***/

  .keyframes-fade-out-from-current() {
    to {
      opacity: 0;
    }
  }

  @keyframes fade-out-from-current {
    .keyframes-fade-out-from-current();
  }

  /*** Fade with Short Drop ***/

  .keyframes-short-drop() {
    0% {
      transform: translateY(-40px);
    }
    40% {
      transform: translateY(7px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes short-drop {
    .keyframes-short-drop();
  }

  /*** Fade out and shrink with blur ***/

  .keyframes-fadeout-shrink-blur() {
    from {
      opacity: 1;
      transform: scale(1, 1);
      filter: blur(0);
    }
    to {
      opacity: 0;
      transform: scale(0.5, 0.5);
      filter: blur(10px);
    }
  }

  @keyframes fadeout-shrink-blur {
    .keyframes-fadeout-shrink-blur();
  }

  /*** Fade out and shrink ***/

  .keyframes-fadeout-shrink() {
    from {
      opacity: 1;
      transform: scale(1, 1);
    }
    to {
      opacity: 0;
      transform: scale(0, 0);
    }
  }

  @keyframes fadeout-shrink {
    .keyframes-fadeout-shrink();
  }

  /*** Fade out and grow with blur ***/

  .keyframes-fadeout-grow-blur() {
    from {
      opacity: 1;
      transform: scale(1, 1);
      filter: blur(0);
    }
    to {
      opacity: 0;
      transform: scale(2, 2);
      filter: blur(10px);
    }
  }

  @keyframes fadeout-grow-blur {
    .keyframes-fadeout-grow-blur();
  }

  /*** Fade in and grow ***/

  .keyframes-fadein-grow() {
    from {
      opacity: 0;
      transform: scale(0, 0);
    }
    to {
      opacity: 1;
      transform: scale(1, 1);
    }
  }

  @keyframes fadein-grow {
    .keyframes-fadein-grow();
  }

  /*** Slide In Bottom ***
       Moves the element into screen from bottom up */

  .keyframes-slidein-bottom() {
    0% {
      transform: translateY(100%);
    }
  }

  @keyframes slidein-bottom {
    .keyframes-slidein-bottom();
  }

  /*** Slide Out Bottom ***
       Moves the element out of bottom screen border */

  .keyframes-slideout-bottom() {
    100% {
      transform: translateY(100%);
    }
  }

  @keyframes slideout-bottom {
    .keyframes-slideout-bottom();
  }

  /*** Slide Out Right ***
       Moves the element out of right screen border */

  .keyframes-slideout-right() {
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes slideout-right {
    .keyframes-slideout-right();
  }

  /*** Slide Out Left ***
       Moves the element out of left screen border */

  .keyframes-slideout-left() {
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes slideout-left {
    .keyframes-slideout-left();
  }

  /*** Grow Y ***
    Scales the element along the y axis until 1. Expects the element to be scaled (e.g. scaleY(0)) when the animation starts.
    To create a slide down animation (as known from jQuery) set transform-origin to top. */

  .keyframes-grow-y() {
    100% {
      transform: scaleY(1);
    }
  }

  @keyframes grow-y {
    .keyframes-grow-y();
  }


  /*** Shrink Y ***
    Shrinks the element along the y axis until 0*/

  .keyframes-shrink-y() {
    100% {
      transform: scaleY(0);
    }
  }

  @keyframes shrink-y {
    .keyframes-shrink-y();
  }

  /*** Fade In Zoom ***/

  .keyframes-fadein-zoom() {
    0% {
      opacity: 0;
      transform: scale(0.75, 0.75);
    }
    100% {
      opacity: 1;
      transform: scale(1, 1);
    }
  }

  @keyframes fadein-zoom {
    .keyframes-fadein-zoom();
  }

  /*** Fade In Zoom Bounce ***/

  .keyframes-fadein-zoom-bounce() {
    0% {
      opacity: 0;
      transform: scale(0.75, 0.75);
    }
    65% {
      opacity: 1;
      transform: scale(1.02, 1.02);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  @keyframes fadein-zoom-bounce {
    .keyframes-fadein-zoom-bounce();
  }

  /*** Rotation ***/

  .keyframes-rotation () {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(359deg);
    }
  }

  @keyframes rotation {
    .keyframes-rotation();
  }

  /*** Pulsate ***/

  .keyframes-pulsate () {
    0% {
      transform: scale(0.25);
      opacity: 0.35;
    }
    45% {
      opacity: 1.0;
    }
    96% {
      transform: scale(1.2);
      opacity: 0.2;
    }
    100% {
      transform: scale(1.2);
      opacity: 0.04;
    }
  }

  @keyframes pulsate {
    .keyframes-pulsate();
  }

  /*** Pulsate Reverse ***/

  .keyframes-pulsate-reverse () {
    0% {
      transform: scale(1.2);
      opacity: 0.0;
    }
    50% {
      opacity: 1.0;
    }
    100% {
      transform: scale(0.1);
      opacity: 0.0;
    }
  }

  @keyframes pulsate-reverse {
    .keyframes-pulsate-reverse();
  }

  /*** Pulsate In-Out ***/

  .keyframes-pulsate-in-out () {
    0% {
      transform: scale(1);
      opacity: 1.0;
    }
    50% {
      transform: scale(0.1);
      opacity: 0.01;
    }
    100% {
      transform: scale(1);
      opacity: 1.0;
    }
  }

  @keyframes pulsate-in-out {
    .keyframes-pulsate-in-out();
  }

  /*** Animate Dot ***/

  .keyframes-animate-dot () {
    0% {
      color: @text-color;
      bottom: 0;
    }
    25% {
      color: @palette-gray-5;
      bottom: 4px;
    }
    50% {
      color: @text-color;
      bottom: 0;
    }
    100% {
      color: @text-color;
      bottom: 0;
    }
  }

  @keyframes animateDot {
    .keyframes-animate-dot();
  }

  /*** Shake ***/

  .animation-shake() {
    transform-origin: 50% 50%;
    animation-name: shake;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
  }

  .keyframes-shake() {
    0% {
      transform: translate(2px, 1px) rotate(0deg);
    }
    10% {
      transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
      transform: translate(-3px, 0) rotate(1deg);
    }
    30% {
      transform: translate(0, 2px) rotate(0deg);
    }
    40% {
      transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
      transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
      transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
      transform: translate(2px, 1px) rotate(-1deg);
    }
    80% {
      transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
      transform: translate(2px, 2px) rotate(0deg);
    }
    100% {
      transform: translate(1px, -2px) rotate(-1deg);
    }
  }

  @keyframes shake {
    .keyframes-shake();
  }
}

/*** NOP (no operation, may be used to temporarily set css properties while the animation runs, e.g. using a transition) ***/

.keyframes-nop () {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


@keyframes nop {
  .keyframes-nop();
}