.skeleton-container {
    background-color: var(--color-bg-light);
    z-index: 20;
}

.skeleton {
    --height: 60px;
    position: relative;
    width: 100%;
    height: var(--height);
    border-radius: 12px;
    background-color: var(--color-main-light);
    overflow: hidden;
    margin-bottom: 30px;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 250px;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 26%, rgba(225, 225, 225, 1) 50%, rgba(225, 225, 225, 1) 52%, rgba(255, 255, 255, 1) 74%);
    transform: scaleY(2) rotateZ(20deg);
    opacity: .4;
    animation: skeleton-load 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes skeleton-load {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

#app {
    --app-height: 480px;
    position: relative;
    min-height: var(--app-height);
}

#app .skeleton-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}