/* =========================================================
   j-stack-floating: base floating styles
   - DO NOT set position/top/bottom here (JS manages it)
   ========================================================= */

/* Common floating style (top & bottom) */
.float-top,
.float-bottom {
    /* Location is handled by JS:
     - position: fixed;
     - top / bottom
     DO NOT set them here.
   */
    /* Visual transitions only */
    transition: box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

/* Optional: when floating, you might want a subtle shadow */
.float-top {
    /* example:
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  */
}

.float-bottom {
    /* example:
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  */
}

/* =========================================================
   Placeholder (keepSpace: true) styling
   ========================================================= */

.jsf-ph {
    /* default placeholder style
     can be overridden per-item with placeholderStyle option
   */
    background: transparent;
}

/* =========================================================
   Animation presets
   - attach via animation: 'bounce' | 'drop'
   - or custom: animation: 'custom' + animationClass: 'my-class'
   ========================================================= */

/* Bounce-in animation */
.jsf-bounce {
    animation: jsf-bounce-in 0.25s ease-out;
}

@keyframes jsf-bounce-in {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    60% {
        transform: translateY(3px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
    }
}

/* Drop-down animation */
.jsf-drop {
    animation: jsf-drop-in 0.2s ease-out;
}

@keyframes jsf-drop-in {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Example custom animation (for animation: 'custom') */
/*
.my-slide-in {
  animation: my-slide-in-keyframes 0.25s ease-out;
}

@keyframes my-slide-in-keyframes {
  0% {
    transform: translateY(-8px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
*/