/*
 * Skeleton ("ghost") placeholders shown while panels load their data.
 *
 * form.memex-skeleton - a form that's still loading (LoadFormFields in site.js). The form's real,
 *   server-rendered layout is shown as shimmering blocks: labels, inputs, checkboxes and buttons
 *   keep their size and position, so nothing jumps when the values arrive.
 * .memex-skeleton-block - placeholder for a table/hybrid panel (Views/Shared/_PanelSkeleton.cshtml),
 *   shown while the panel's template is collapsed (.memex-table-loading, TableGet in tables.js).
 */

:root {
    --memex-skeleton-base: #e8eaee;
    --memex-skeleton-highlight: #f6f7f9;
}

@keyframes memex-skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ---- Loading forms ---- */

form.memex-skeleton {
    cursor: progress;
    pointer-events: none;
    user-select: none;
}

    /* Hide all the text (and icon glyphs) - the shapes below stand in for it */
    form.memex-skeleton,
    form.memex-skeleton * {
        color: transparent !important;
        text-shadow: none !important;
    }

        form.memex-skeleton ::placeholder {
            color: transparent !important;
        }

        form.memex-skeleton img {
            opacity: 0;
        }

        /* The shapes: the shimmering fill on each label, field, checkbox and button */
        form.memex-skeleton label[for],
        form.memex-skeleton .form-label,
        form.memex-skeleton .checkbox-name,
        form.memex-skeleton .checkbox-icon-wrapper,
        form.memex-skeleton .form-check-input,
        form.memex-skeleton .form-control,
        form.memex-skeleton .form-select,
        form.memex-skeleton select,
        form.memex-skeleton textarea,
        form.memex-skeleton input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]),
        form.memex-skeleton .file-upload,
        form.memex-skeleton .image-cropper,
        form.memex-skeleton .btn,
        form.memex-skeleton h6,
        form.memex-skeleton p {
            background-color: var(--memex-skeleton-base) !important;
            background-image: linear-gradient(90deg, var(--memex-skeleton-base) 25%, var(--memex-skeleton-highlight) 37%, var(--memex-skeleton-base) 63%) !important;
            background-size: 400% 100% !important;
            border-color: transparent !important;
            border-radius: 4px;
            box-shadow: none !important;
            animation: memex-skeleton-shimmer 1.4s ease infinite;
        }

        /* Profile picture field: the cropper is already a circle - just drop the camera badge */
        form.memex-skeleton .image-cropper {
            border-radius: 50%;
        }

        form.memex-skeleton .profile-image-edit {
            visibility: hidden;
        }

/* ---- Loading table / hybrid panels ---- */

.memex-table-loading {
    height: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.memex-skeleton-block {
    padding: 0.25rem 0;
}

.memex-skeleton-line,
.memex-skeleton-avatar {
    background-color: var(--memex-skeleton-base);
    background-image: linear-gradient(90deg, var(--memex-skeleton-base) 25%, var(--memex-skeleton-highlight) 37%, var(--memex-skeleton-base) 63%);
    background-size: 400% 100%;
    animation: memex-skeleton-shimmer 1.4s ease infinite;
}

.memex-skeleton-line {
    height: 0.85rem;
    margin: 0.6rem 0;
    border-radius: 4px;
}

    .memex-skeleton-line.memex-skeleton-heading {
        width: 40%;
        height: 1.1rem;
        margin-bottom: 1rem;
    }

.memex-skeleton-block > .memex-skeleton-line:last-child {
    width: 70%;
}

.memex-skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.memex-skeleton-avatar {
    flex: 0 0 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.memex-skeleton-row-lines {
    flex: 1;
}

    .memex-skeleton-row-lines .memex-skeleton-line {
        margin: 0.45rem 0;
    }

        .memex-skeleton-row-lines .memex-skeleton-line:last-child {
            width: 55%;
        }

/* Profile card variant (_PanelSkeleton with SkeletonProfileImage): a centred picture circle the same
   size as the real .image-cropper, then name, details and a button */
.memex-skeleton-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .memex-skeleton-profile .memex-skeleton-profile-picture {
        flex: 0 0 auto;
        width: 180px;
        max-width: 100%;
        height: 180px;
        margin-bottom: 0.6rem;
    }

    .memex-skeleton-profile .memex-skeleton-line {
        width: 45%;
        margin: 0.4rem auto;
    }

        /* Name, then short status, medium detail, long detail (eg. email) */
        .memex-skeleton-profile .memex-skeleton-line.memex-skeleton-heading {
            width: 40%;
            margin-bottom: 0.5rem;
        }

        .memex-skeleton-profile .memex-skeleton-line:nth-of-type(3) {
            width: 25%;
        }

        .memex-skeleton-profile .memex-skeleton-line:nth-of-type(4) {
            width: 45%;
        }

        .memex-skeleton-profile .memex-skeleton-line:nth-of-type(5) {
            width: 85%;
        }

    .memex-skeleton-profile > .memex-skeleton-line.memex-skeleton-button {
        width: 45%;
        height: 2.25rem;
        margin-top: 0.75rem;
    }

/* Alert banner variant (_PanelSkeleton with SkeletonAlert): an alert has no white panel around it and
   sits in a flex row (.static-banner, _DynamicPanel) - so this brings its own card and takes the whole
   row, squeezing the collapsed template beside it to nothing */
.memex-skeleton-alert {
    flex: 0 0 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: var(--root-border-radius, 0.375rem);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

    .memex-skeleton-alert .memex-skeleton-row {
        margin: 0;
    }

@media (prefers-reduced-motion: reduce) {
    form.memex-skeleton *,
    .memex-skeleton-line,
    .memex-skeleton-avatar {
        animation: none !important;
    }
}