//@use "veela-lib" as *;

//
@layer components {

    // ─────────────────────────────────────────────────────────────────────────
    // Base Shaped Element
    // ─────────────────────────────────────────────────────────────────────────
    .shaped {
        // Layout
        display: flex;
        place-content: center;
        place-items: center;
        aspect-ratio: 1 / 1 !important;
        inline-size: stretch;
        block-size: fit-content;
        padding: 1.25rem;

        // Containment & Overflow
        contain: strict;
        overflow: hidden;

        // WHY: per-shape `--border-radius` (circle 50%, squircle 28%) was ignored — hardcoded 1.5rem won.
        border-radius: var(--border-radius, 1.5rem);
        //clip-path: var(--clip-path, none);
        z-index: 1;

        // Interaction
        pointer-events: auto;
        user-select: none;

        // Animation
        transition-behavior: allow-discrete;
        transition: --background-tone-shift 0.2s ease-in-out, --icon-color 0.2s ease-in-out;

        // Nested elements
        & span, & ui-icon {
            inline-size: stretch;
            block-size: fit-content;
        }

        & ui-icon {
            aspect-ratio: 1 / 1 !important;
        }
    }

    // ─────────────────────────────────────────────────────────────────────────
    // Dragging State
    // ─────────────────────────────────────────────────────────────────────────
    *[data-dragging] {
        z-index: calc(100 + var(--z-index, 0)) !important;
    }

    //
    // Shape Variants: Border-Radius Based (Simple)
    // ─────────────────────────────────────────────────────────────────────────
    *:not(:has(.shaped)),
    *:not(.shaped) > *,
    *:not(.shaped) .shaped {
        //--clip-path: none;

        // ─────────────────────────────────────────────────────────────────────────
        // Base Shape Container
        // ─────────────────────────────────────────────────────────────────────────
        &[data-shape] {
            contain: strict;
            overflow: hidden;
            aspect-ratio: 1 / 1 !important;
            pointer-events: auto;
            touch-action: none;
        }

        // ─────────────────────────────────────────────────────────────────────────
        // Shape Variants: Border-Radius Based (Simple)
        // ─────────────────────────────────────────────────────────────────────────

        // Square - minimal rounding
        &[data-shape="square"] {
            --border-radius: var(--radius-md);
            --clip-path: none;
        }

        // Squircle - iOS-style super-ellipse approximation
        &[data-shape="squircle"] {
            --border-radius: 28%;
            --clip-path: none;
        }

        // Circle - fully round
        &[data-shape="circle"] {
            --border-radius: 50%;
            --clip-path: none;
        }

        // Rounded - generous rounding
        &[data-shape="rounded"] {
            --border-radius: var(--radius-xl);
            --clip-path: none;
        }

        // Blob - organic asymmetric shape
        &[data-shape="blob"] {
            --border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            --clip-path: none;
        }

        // ─────────────────────────────────────────────────────────────────────────
        // Shape Variants: Clip-Path Based (Polygonal)
        // Uses `polygon(round X, ...)` for smooth rounded corners (Chrome 111+)
        // ─────────────────────────────────────────────────────────────────────────

        // Hexagon - regular 6-sided polygon (flat-top orientation)
        &[data-shape="hexagon"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.375rem,
                50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%
            );
        }

        // Diamond - rotated square / rhombus
        &[data-shape="diamond"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.5rem,
                50% 0%, 100% 50%, 50% 100%, 0% 50%
            );
        }

        // Star - 5-pointed star with proper inner/outer radii
        &[data-shape="star"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.25rem,
                50% 0%,
                61% 35%, 98% 38%,
                68% 59%, 79% 95%,
                50% 75%,
                21% 95%, 32% 59%,
                2% 38%, 39% 35%
            );
        }

        // Badge - shield/pennant shape
        &[data-shape="badge"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.375rem,
                0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%
            );
        }

        // Heart - smooth heart shape using polygon approximation
        &[data-shape="heart"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.25rem,
                50% 100%,
                10% 65%, 0% 45%, 0% 30%,
                5% 15%, 18% 3%, 35% 0%, 50% 12%,
                65% 0%, 82% 3%, 95% 15%,
                100% 30%, 100% 45%, 90% 65%
            );
        }

        // Clover - 4-leaf clover / cross-star
        &[data-shape="clover"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.375rem,
                50% 0%, 60% 30%, 70% 30%, 100% 50%,
                70% 70%, 60% 70%, 50% 100%,
                40% 70%, 30% 70%, 0% 50%,
                30% 30%, 40% 30%
            );
        }

        // Flower - 8-petal flower with alternating radii
        &[data-shape="flower"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.25rem,
                50% 0%, 58% 25%, 85% 15%, 68% 40%,
                100% 50%, 68% 60%, 85% 85%, 58% 75%,
                50% 100%, 42% 75%, 15% 85%, 32% 60%,
                0% 50%, 32% 40%, 15% 15%, 42% 25%
            );
        }

        // Triangle - equilateral triangle
        &[data-shape="triangle"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.5rem,
                50% 0%, 100% 87%, 0% 87%
            );
        }

        // Pentagon - regular 5-sided polygon
        &[data-shape="pentagon"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.375rem,
                50% 0%, 97.5% 35%, 79.5% 95%, 20.5% 95%, 2.5% 35%
            );
        }

        // Octagon - regular 8-sided polygon
        &[data-shape="octagon"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.25rem,
                30% 0%, 70% 0%, 100% 30%, 100% 70%,
                70% 100%, 30% 100%, 0% 70%, 0% 30%
            );
        }

        // Cross / Plus - plus sign shape
        &[data-shape="cross"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.375rem,
                35% 0%, 65% 0%, 65% 35%, 100% 35%,
                100% 65%, 65% 65%, 65% 100%, 35% 100%,
                35% 65%, 0% 65%, 0% 35%, 35% 35%
            );
        }

        // Arrow - right-pointing arrow/chevron
        &[data-shape="arrow"] {
            --border-radius: 0;
            --clip-path: polygon(
                round 0.375rem,
                0% 20%, 60% 20%, 60% 0%, 100% 50%,
                60% 100%, 60% 80%, 0% 80%
            );
        }

        // ─────────────────────────────────────────────────────────────────────────
        // Shape Variants: Tear/Drop (Asymmetric Radius)
        // ─────────────────────────────────────────────────────────────────────────

        // Tear - teardrop/water drop shape
        &[data-shape="egg"] {
            --border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            --clip-path: none;
        }

        //
        &[data-shape="tear"] {
            --border-radius: 50cqmin 50cqmin 5rem 50cqmin;
            --clip-path: none;

            border-start-start-radius: 50cqmin;
            border-start-end-radius: 50cqmin;
            border-end-start-radius: 50cqmin;
            border-end-end-radius: 5rem;
        }

        // ─────────────────────────────────────────────────────────────────────────
        // Shape Variants: Wavy (Procedural)
        // ─────────────────────────────────────────────────────────────────────────

        // Wavy - procedural wavy edge (uses Integrate function)
        &[data-shape="wavy"] {
            --border-radius: calc(var(--icon-size, 100%) * 0.5);
        }
    }

}