/* ripple-effect */
.cx-ripple {
   position: relative;
   overflow: hidden;

   &:after
   {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      opacity: 0;
      background-image: radial-gradient(circle, var(--cx-ripple__bg-color) 10%, transparent 10.01%);
      background-position: 50%;
      background-repeat: no-repeat;
      transition: transform 0.3s, opacity 0.3s;
   }

   &.clicked:after {
      width: 100%;
      height: 100%;
      animation: rippleFrame .3s ease-out;
   }

   /* Zwei identische Animationen unter verschiedenen Namen: der a/b-Klassenwechsel in CxM3Button
      re-triggert den Ripple, ohne dass die Klasse zeitversetzt entfernt werden muss. */
   &.clicked-fast-a:after {
      width: 100%;
      height: 100%;
      animation: rippleFrameA .2s ease-out;
   }

   &.clicked-fast-b:after {
      width: 100%;
      height: 100%;
      animation: rippleFrameB .2s ease-out;
   }
}

@keyframes rippleFrame {
   0% {
      opacity: 0.3;
      transform: scale(0);
   }

   20% {
      transform: scale(2);
   }

   100% {
      opacity: 0;
      transform: scale(10);
   }
}

@keyframes rippleFrameA {
   0% {
      opacity: 0.3;
      transform: scale(0);
   }

   20% {
      transform: scale(2);
   }

   100% {
      opacity: 0;
      transform: scale(10);
   }
}

@keyframes rippleFrameB {
   0% {
      opacity: 0.3;
      transform: scale(0);
   }

   20% {
      transform: scale(2);
   }

   100% {
      opacity: 0;
      transform: scale(10);
   }
}

/* shimmer-effect */
.cx-shimmer {
   background: linear-gradient(90deg, var(--cx-grey-200) 40%, var(--cx-grey-50) 50%, var(--cx-grey-200) 60%);
   background-size: 300%;
   background-position-x: 100%;
   animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
   to {
      background-position-x: 0;
   }
}

@media (forced-colors: active) {
   .cx-shimmer {
      forced-color-adjust: none;
      outline: 1px solid CanvasText;
      background: linear-gradient(90deg, Canvas 49%, CanvasText 50%, Canvas 51%);
      background-size: 300%;
      background-position-x: 100%;
   }
}