@use '../../NewLightboxStyles.scss' as newstyles;

.skeletonDoc-container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
    margin: 20px;
    gap: 20px;

    .header {
        width: calc(100% - 20px);
        height: 80px;
        background: newstyles.$gray-l2;
        animation: skeleton-loading-l2 1s linear infinite alternate;
        display: grid;
        grid-template-rows: 60% 40%;
        padding: 10px;
        grid-template-columns: auto auto auto auto;
        border-radius: 20px;

        .title {
            grid-row: 1;
            grid-column: 1 / 5;
            display: flex;
            width: fit-content;
            height: 100%;
            min-width: 500px;
            font-size: newstyles.$title-size;
            animation: skeleton-loading-l3 1s linear infinite alternate;
            border-radius: 20px;
        }

        .type {
            display: flex;
            padding: 3px 7px;
            width: fit-content;
            height: fit-content;
            margin-top: 8px;
            min-height: 15px;
            min-width: 60px;
            grid-row: 2;
            grid-column: 1;
            animation: skeleton-loading-l3 1s linear infinite alternate;
            border-radius: 20px;
        }

        .buttons-container {
            grid-row: 1 / 3;
            grid-column: 5;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;

            .button {
                width: 50px;
                height: 50px;
                border-radius: 100%;
                animation: skeleton-loading-l3 1s linear infinite alternate;
            }
        }
    }

    .content {
        width: 100%;
        flex: 1;
        -webkit-flex: 1; /* Chrome */
        background: newstyles.$gray-l2;
        animation: skeleton-loading-l2 1s linear infinite alternate;
        border-radius: 20px;
    }

    // &.dark {
    //   background: newstyles.$black;
    // }

    // &.light,
    // &.default {
    //   background: newstyles.$white;
    // }
}