/* =====================================================
 * BRICKS SKELETON LIBRARY — skeletons.css
 * Version: 1.1.1
 * Author:  Gabriel Ramírez — https://esgabrielweb.com/
 *
 * HOW THE SHIMMER WORKS:
 *   The ::after pseudo-element is a semi-transparent highlight
 *   strip (75% wide) placed to the LEFT of the element (left: -100%).
 *   The keyframe moves it via translateX(350%) so it travels through
 *   the full width and exits on the right. This works regardless of
 *   the element's actual width — it always adapts.
 *
 * HOW SIZING WORKS:
 *   We intentionally DO NOT set width/height on most classes.
 *   The skeleton fills whatever dimensions the host element already has
 *   (set by Bricks Builder, inline styles, or CSS layout).
 *   Only shape-defining properties (border-radius, aspect-ratio)
 *   and minimum fallback heights where invisible without them are kept.
 * ===================================================== */


/* ==========================================================
 * CORE ENGINE
 * Targets every element that has ANY class starting with "skeleto-"
 * ========================================================== */
body [class*="skeleto-"] {
    position: relative !important;
    overflow: hidden !important;
    pointer-events: none !important;
    user-select: none !important;

    /* Skeleton grey fill — overrides images, bg-colors from Bricks */
    background-color: #d4d4d4 !important;
    background-image: none !important;

    /* Kill visible content */
    color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* The shimmer highlight strip */
body [class*="skeleto-"]::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;   /* Start fully off-screen to the left */
    bottom: 0 !important;
    width: 75% !important;    /* Width of the highlight beam           */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 100%
    ) !important;
    animation: bs-shimmer 1.6s ease-in-out infinite !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

/* Slide the beam from far-left to far-right.
   350% ensures it exits even on very wide elements. */
@keyframes bs-shimmer {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(350%); }
}

/* Hide child nodes so the real content never shows during loading */
body [class*="skeleto-"] > * {
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ==========================================================
 * 1. SKELETO-IMAGE
 * Adapts to the image element's own width & height.
 * Only enforces border-radius (from the settings panel).
 * ========================================================== */
.skeleto-image {
    border-radius: var(--bs-radius-image, 8px) !important;
    display: block !important;
}
.skeleto-image::after {
    border-radius: inherit !important; /* Shimmer respects the radius */
}


/* ==========================================================
 * 2. SKELETO-TITLE
 * A thin heading bar. Keeps a fixed height (18 px) so it
 * remains visible when the heading has no intrinsic height,
 * but width stretches to whatever the element provides.
 * ========================================================== */
.skeleto-title {
    display: block !important;
    height: 18px !important;
    border-radius: 6px !important;
    margin-bottom: 0.5em !important;
}


/* ==========================================================
 * 3. SKELETO-LINE
 * Thin single text-line bar. Fixed height, flexible width.
 * ========================================================== */
.skeleto-line {
    display: block !important;
    height: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 0.4em !important;
}


/* ==========================================================
 * 4. SKELETO-BADGE  (pill shape)
 * Small inline pill. Has a fixed height; width from the element.
 * ========================================================== */
.skeleto-badge {
    display: inline-block !important;
    height: 22px !important;
    border-radius: 11px !important;
    vertical-align: middle !important;
}


/* ==========================================================
 * 5. SKELETO-TAG  (squared badge)
 * ========================================================== */
.skeleto-tag {
    display: inline-block !important;
    height: 22px !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
}


/* ==========================================================
 * 6. SKELETO-BUTTON
 * Pill button. Height fixed for visibility; width from element.
 * ========================================================== */
.skeleto-button {
    display: inline-block !important;
    height: 38px !important;
    border-radius: var(--bs-radius-button, 30px) !important;
}
.skeleto-button::after {
    border-radius: inherit !important;
}


/* ==========================================================
 * 7. SKELETO-CIRCLE
 * Forces the element to be a perfect circle using aspect-ratio.
 * Width comes from the element's own size in Bricks.
 * ========================================================== */
.skeleto-circle {
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-block !important;
}
.skeleto-circle::after {
    border-radius: 50% !important;
}


/* ==========================================================
 * 8. SKELETO-SQUARE
 * Forces 1:1 ratio. Width from Bricks element size.
 * ========================================================== */
.skeleto-square {
    aspect-ratio: 1 / 1 !important;
    border-radius: 4px !important;
    display: inline-block !important;
}


/* ==========================================================
 * 9. SKELETO-RADIO
 * Compact perfect circle (radio button dot).
 * Minimal 16×16 fallback so it's visible without Bricks sizing.
 * ========================================================== */
.skeleto-radio {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-height: unset !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    vertical-align: middle !important;
}
.skeleto-radio::after {
    border-radius: 50% !important;
}


/* ==========================================================
 * 10. SKELETO-PROGRESS
 * Thin progress track. Uses its OWN indeterminate sweep
 * animation instead of the default shimmer beam.
 * ========================================================== */
.skeleto-progress {
    display: block !important;
    height: 8px !important;
    min-height: unset !important;
    border-radius: 99px !important;
    background-color: #e2e2e2 !important;
}

/* Indeterminate fill that sweeps across the track */
.skeleto-progress::after {
    left: -50% !important;
    width: 50% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #b8b8b8 40%,
        #c8c8c8 60%,
        transparent 100%
    ) !important;
    animation: bs-progress-sweep 1.6s ease-in-out infinite !important;
    border-radius: 99px !important;
}

@keyframes bs-progress-sweep {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(400%); }
}


/* ==========================================================
 * 11. SKELETO-CHECKBOX
 * Small square. Fixed 18×18 minimum (intrinsically small).
 * ========================================================== */
.skeleto-checkbox {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-height: unset !important;
    border-radius: 3px !important;
    aspect-ratio: 1 / 1 !important;
    vertical-align: middle !important;
}


/* ==========================================================
 * 12. SKELETO-TEXTAREA
 * Multi-line input. Height from element; width from element.
 * Minimum height fallback so it's visible if no size is set.
 * ========================================================== */
.skeleto-textarea {
    display: block !important;
    min-height: 80px !important;
    border-radius: var(--bs-radius-input, 8px) !important;
}
.skeleto-textarea::after {
    border-radius: inherit !important;
}


/* ==========================================================
 * 13. SKELETO-SELECT
 * Dropdown placeholder. Height from element.
 * A CSS-drawn pulsing chevron arrow is layered via ::before.
 * ========================================================== */
.skeleto-select {
    display: block !important;
    height: 40px !important;
    min-height: unset !important;
    border-radius: var(--bs-radius-select, 8px) !important;
}

/* Pulsing chevron arrow on the right */
.skeleto-select::before {
    content: "" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 6px solid rgba(90, 90, 90, 0.4) !important;
    animation: bs-chevron-pulse 1.8s ease-in-out infinite !important;
    z-index: 10000 !important;
    pointer-events: none !important;
}

@keyframes bs-chevron-pulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.85; }
}

.skeleto-select::after {
    border-radius: inherit !important;
}


/* ==========================================================
 * 14. SKELETO-TEXT  (multi-line text block)
 *
 * Renders three virtual "text lines" using stacked CSS gradients.
 * The element must have a height (set in Bricks or via inline style);
 * if not, the 62 px fallback keeps it visible.
 *
 * The shimmer is applied by a custom ::after override that works
 * the same translateX trick but with a wider/slower sweep so it
 * distinctly crosses each text strip in sequence.
 * ========================================================== */
.skeleto-text {
    display: block !important;
    min-height: 62px !important;  /* 3 lines × 14 px + 2 gaps × 10 px */

    /* Transparent base — the gradient strips ARE the content */
    background-color: transparent !important;

    /* Three text-strip lines at proportional widths */
    background-image:
        linear-gradient(#d4d4d4 100%, transparent 0%),
        linear-gradient(#d4d4d4 100%, transparent 0%),
        linear-gradient(#d4d4d4 100%, transparent 0%) !important;

    /* Heights of the strips (each 12 px) */
    background-size:
        100% 12px,
        85%  12px,
        55%  12px !important;

    /* Vertical positions: 0 px, 24 px, 48 px */
    background-position:
        0   0px,
        0  24px,
        0  48px !important;

    background-repeat: no-repeat !important;
    border-radius: 4px !important;
}

/* Shimmer override for .skeleto-text.
   Uses the same translateX approach but starts at left: -80%
   and the beam is thinner (60%) for a crisper text-line feel. */
.skeleto-text::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -80% !important;
    bottom: 0 !important;
    width: 60% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.65) 50%,
        transparent 100%
    ) !important;
    animation: bs-shimmer-text 2s ease-in-out infinite !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    border-radius: 4px !important;
}

@keyframes bs-shimmer-text {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(400%); }
}