/* Effektgruppe: buttons/glow; Reihenfolge in inc/assets.php. */

/*glow lines for borders   glow line is drawn and can disappear */
   
.bar {
    position: absolute;
    height: var(--bar-thickness, 4px);
    background: linear-gradient(
        90deg,
        var(--bar-color-1, #d0f0dd), /* Fallback default */
        var(--bar-color-2, #d0f0dd)  /* Fallback default */
    );
    border-radius: 0px;
    animation-timing-function: cubic-bezier(0.3, 0.4, 0.3, 1);
    animation-duration: var(--bar-speed, 2s);
    animation-fill-mode: forwards;
    animation-iteration-count: var(--iteration-count, 1);
    opacity: 0; /* Initially hide the element */
    animation-play-state: paused; /* Initially pause the animation */
    will-change: transform, opacity;
    transform-origin: left; /* Set the origin for scaling */
    width: 100%;
    transform: scaleX(0); /* Start scaled down */
}

.top {
    top: 0;
    left: 0;
}

.bottom {
    bottom: 0;
    left: 0;
}

@keyframes top-animation {
    0%   { transform: scaleX(0); opacity: 1; }
    50%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 1; }
}

@keyframes bottom-animation {
    0%   { transform: scaleX(0); opacity: 1; }
    50%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 1; }
}

@keyframes expand {
    0%   { transform: scaleX(0); opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}