/*
 * The form skeleton drawn by RenderFormSkeleton (PHP). Compiled to build/donationFormSkeletonCss.css
 * and inlined next to the markup, in the block's output and inside the form view, so the sketch
 * paints before any enqueued stylesheet arrives. Host pages do not load the design system
 * foundation stylesheet, so every value here is self-contained.
 *
 * Hand-copied from the core form designs: the 0.5rem radius, the header band, the section padding
 * clamp and the 51.5rem classic width. Container units stand in for the vw the real designs use,
 * because the form's viewport is the iframe, which is this box. Everything is neutral grey, even
 * where the real form is colored, so the sketch reads as a placeholder and not as content.
 */
.givewp-embed-skeleton {
    --givewp-skeleton-bar: rgba(0, 0, 0, 0.08);
    --givewp-skeleton-shine: rgba(255, 255, 255, 0.5);
    --givewp-skeleton-radius: 0.5rem;
    --givewp-skeleton-padding: clamp(1.5rem, 4vw, 5rem);

    /* A cqi value inside a custom property is invalid at use time without support, so it is gated. */
    @supports (padding: 1cqi) {
        --givewp-skeleton-padding: clamp(1.5rem, 7cqi, 5rem);
    }
    width: 100%;
    max-width: 51.5rem;
    margin: 0 auto;

    &__bar {
        display: block;
        border-radius: 0.25rem;
        background-color: var(--givewp-skeleton-bar);
        background-image: linear-gradient(90deg, transparent, var(--givewp-skeleton-shine), transparent);
        background-size: 200% 100%;
        animation: givewp-embed-skeleton-shine 1.4s ease-in-out infinite;
    }

    &__header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: var(--givewp-skeleton-padding);
        border-radius: var(--givewp-skeleton-radius);
        background-color: rgba(0, 0, 0, 0.04);
    }

    &__form {
        display: flex;
        flex-direction: column;
        border-radius: var(--givewp-skeleton-radius);
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    &__section {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        padding: var(--givewp-skeleton-padding);

        &:last-child {
            padding-top: 0;
        }
    }

    &__section-header {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    &__field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    &__image {
        width: 100%;
        height: 12rem;
        border-radius: var(--givewp-skeleton-radius);
    }

    &__title {
        width: 60%;
        height: 2rem;
    }

    &__heading {
        width: 45%;
        height: 1.5rem;
    }

    &__panel {
        width: 100%;
        height: 14rem;
        border-radius: var(--givewp-skeleton-radius);

        &--tall {
            height: 15rem;
        }
    }

    &__line {
        width: 90%;
        height: 1rem;

        &--short {
            width: 55%;
        }
    }

    &__goal {
        width: 100%;
        height: 4rem;
        border-radius: var(--givewp-skeleton-radius);
    }

    &__label {
        width: 35%;
        height: 1rem;
    }

    &__input {
        width: 100%;
        height: 3.5rem;

        &--tall {
            height: 4.5rem;
        }
    }

    /*
     * The real levels grid is one column under the form's 576px breakpoint and three above. The
     * media query is the fallback for browsers without container queries; the container query
     * comes later so it wins where supported.
     */
    &__levels {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;

        @media (min-width: 36rem) {
            grid-template-columns: repeat(3, 1fr);
        }

        @container (max-width: 36rem) {
            grid-template-columns: 1fr;
        }

        @container (min-width: 36rem) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    &__level {
        height: 3rem;
    }

    &__field--gateways {
        gap: 1rem;
    }

    &__button {
        width: 100%;
        height: 4rem;
        background-color: rgba(0, 0, 0, 0.14);
    }

    &--classic &__header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    &--classic &__header + &__form {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Multi-step: a 35rem card, a 50px step title bar with a progress line, 2rem body padding. */
    &__step {
        --givewp-skeleton-padding: 2rem;

        max-width: 35rem;
        margin: 0 auto;
        width: 100%;
    }

    &__step-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        height: 3.625rem;
        margin-bottom: 1.5rem;
        border-bottom: 0.5rem solid rgba(0, 0, 0, 0.08);
    }

    &__step-title {
        width: 60%;
        height: 1.25rem;
    }

    &__secure {
        width: 10rem;
        height: 1.25rem;
        margin: 0 auto 1.5rem;
    }

    &--multi-step &__form &__header {
        background-color: transparent;

        + .givewp-embed-skeleton__section {
            padding-top: 0;
        }
    }

    &--two-panel {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        max-width: 78rem;

        .givewp-embed-skeleton__header {
            flex: 1 1 42.5rem;
            background-color: transparent;
        }

        .givewp-embed-skeleton__form {
            flex: 1 1 35.5rem;
            max-width: none;
        }

        @media (max-width: 53.5rem) {
            flex-direction: column;
            gap: 0;
            max-width: 35rem;

            .givewp-embed-skeleton__header,
            .givewp-embed-skeleton__form {
                flex-basis: auto;
                width: 100%;
            }
        }

        @container (max-width: 53.5rem) {
            flex-direction: column;
            gap: 0;
            max-width: 35rem;

            .givewp-embed-skeleton__header,
            .givewp-embed-skeleton__form {
                flex-basis: auto;
                width: 100%;
            }
        }
    }
}

@keyframes givewp-embed-skeleton-shine {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .givewp-embed-skeleton__bar {
        animation: none;
    }
}