/*
 * Variables
 */

:root {
    --card-padding: 24px;
    --card-height: 340px;
    --card-skeleton: linear-gradient(lightgrey var(--card-height), transparent 0);
    --avatar-size: 32px;
    --avatar-position: var(--card-padding) var(--card-padding);
    --avatar-skeleton: radial-gradient(circle 16px at center, white 99%, transparent 0 );
    --title-height: 32px;
    --title-width: 200px;
    --title-position: var(--card-padding) 180px;
    --title-skeleton: linear-gradient(white var(--title-height), transparent 0);
    --desc-line-height: 16px;
    --desc-line-skeleton: linear-gradient(white var(--desc-line-height), transparent 0);
    --desc-line-1-width: 230px;
    --desc-line-1-position: var(--card-padding) 242px;
    --desc-line-2-width: 180px;
    --desc-line-2-position: var(--card-padding) 265px;
    --footer-height: 40px;
    --footer-position: 0 calc(var(--card-height) - var(--footer-height));
    --footer-skeleton: linear-gradient(white var(--footer-height), transparent 0);
    --blur-width: 200px;
    --blur-size: var(--blur-width) calc(var(--card-height) - var(--footer-height));
}

table.skeleton {
    width: 100%;
}

    table.skeleton td {
        padding: 4px;
    }

div.skeleton {
    align-content: center;
    align-items: center;
    color: #aaa;
    display: flex;
    justify-content: center;
    justify-items: center;
    font-size: 15cqh;
    height: 100%;
    width: 100%;
}

    .skeleton.input {

        background-color: #fff;
        height: 60px;
    }

    .skeleton.small {
        font-size: 5cqh;
    }

.shimmer {
    overflow: hidden;
    position: relative;
}

    .shimmer::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient( 90deg, rgba(187, 187, 187, 0) 0, rgba(187, 187, 187, 0.2) 20%, rgba(187, 187, 187, 0.5) 60%, rgba(187, 187, 187, 0) );
        animation: shimmer 5s infinite;
        content: '';
    }

    .shimmer.light::after {
        background-image: linear-gradient( 90deg, rgba(235, 235, 235, 0) 0, rgba(235, 235, 235, 0.2) 20%, rgba(235, 235, 235, 0.5) 60%, rgba(187, 187, 187, 0) );
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}