//
// _general.scss
//

.app-wrapper {
    height: 100%;
    margin: 0 auto;
    position: relative;
}

// Main Content
.page-content {
    position: relative;
    transition: all 0.3s ease-in-out;
    min-height: calc(100vh - $topbar-height);
    padding: calc($spacer * 1) calc($spacer * 0.5) $footer-height
        calc($spacer * 0.5);
    margin-left: $sidebar-width;
}

// Animated Star
$shooting-time: 3000ms;

.animated-stars {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotateZ(45deg);
}

.shooting-star {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 2px;
    background: linear-gradient(
        -45deg,
        rgba(95, 145, 255, 1),
        rgba(0, 0, 255, 0)
    );
    border-radius: 999px;
    filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
    animation: tail $shooting-time ease-in-out infinite,
        shooting $shooting-time ease-in-out infinite;

    &::before {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        height: 2px;
        background: linear-gradient(
            -45deg,
            rgba(0, 0, 255, 0),
            rgba(95, 145, 255, 1),
            rgba(0, 0, 255, 0)
        );
        transform: translateX(50%) rotateZ(45deg);
        border-radius: 100%;
        animation: shining $shooting-time ease-in-out infinite;
    }

    &::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        height: 2px;
        background: linear-gradient(
            -45deg,
            rgba(0, 0, 255, 0),
            rgba(95, 145, 255, 1),
            rgba(0, 0, 255, 0)
        );
        transform: translateX(50%) rotateZ(45deg);
        border-radius: 100%;
        animation: shining $shooting-time ease-in-out infinite;
        transform: translateX(50%) rotateZ(-45deg);
    }

    @for $i from 1 through 20 {
        &:nth-child(#{$i}) {
            $delay: random(9999) + 0ms;
            top: calc(50% - #{random(400) - 200px});
            left: calc(50% - #{random(300) + 0px});
            animation-delay: $delay;
            // opacity: random(50) / 100 + 0.5;

            &::before,
            &::after {
                animation-delay: $delay;
            }
        }
    }
}

@keyframes tail {
    0% {
        width: 0;
    }

    30% {
        width: 100px;
    }

    100% {
        width: 0;
    }
}

@keyframes shining {
    0% {
        width: 0;
    }

    50% {
        width: 30px;
    }

    100% {
        width: 0;
    }
}

@keyframes shooting {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(300px);
    }
}

@keyframes sky {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(45 + 360deg);
    }
}