/**
 * Border Effects — Corner-Only Borders
 *
 * L-shaped decorations at each corner using pseudo-elements.
 * Uses ::before for top corners and ::after for bottom corners,
 * with box-shadow to duplicate to the opposite side.
 *
 * NOTE: Consumes both pseudo-elements — cannot combine with
 * animated borders that also need pseudo-elements.
 */

/* ==========================================================================
   Corner Base
   ========================================================================== */

[class*="border-fx-corners"] {
    position: relative;
}

[class*="border-fx-corners"]::before,
[class*="border-fx-corners"]::after {
    content: '';
    position: absolute;
    width: var(--border-fx-corner-size, 20px);
    height: var(--border-fx-corner-size, 20px);
    border-color: var(--border-fx-corner-color, var(--color-primary));
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}

/* Top-left corner via ::before */
[class*="border-fx-corners"]::before {
    top: 0;
    left: 0;
    border-top-width: var(--border-fx-corner-width, 2px);
    border-left-width: var(--border-fx-corner-width, 2px);
}

/* Bottom-right corner via ::after */
[class*="border-fx-corners"]::after {
    bottom: 0;
    right: 0;
    border-bottom-width: var(--border-fx-corner-width, 2px);
    border-right-width: var(--border-fx-corner-width, 2px);
}

/* Top-right and bottom-left via box-shadow on each pseudo */
[class*="border-fx-corners"]::before {
    box-shadow:
        calc(100cqi - var(--border-fx-corner-size, 20px)) 0 0 0 transparent;
}

/* ==========================================================================
   Corner Presets (3)
   ========================================================================== */

/* Bracket — technical, HUD style */
.border-fx-corners-bracket {
    --border-fx-corner-size: 20px;
    --border-fx-corner-width: 2px;
    --border-fx-corner-color: var(--color-primary);
}

/* Elegant — fine lines, editorial */
.border-fx-corners-elegant {
    --border-fx-corner-size: 30px;
    --border-fx-corner-width: 1px;
    --border-fx-corner-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

/* Bold — thick, primary color */
.border-fx-corners-bold {
    --border-fx-corner-size: 24px;
    --border-fx-corner-width: 3px;
    --border-fx-corner-color: var(--color-primary);
}

/* ==========================================================================
   Additional Corner Pairs (top-right + bottom-left)
   Using additional positioned box-shadows on existing pseudos
   ========================================================================== */

/* Top-right corner: duplicate ::before to top-right */
[class*="border-fx-corners"] {
    container-type: inline-size;
}

/* Simplified approach: use outline on positioned pseudo-elements */
[class*="border-fx-corners"]::before {
    box-shadow: none; /* Remove default, handle all 4 corners differently */
}

/*
 * Four-corner approach using two pseudo-elements:
 * ::before handles top-left (direct) and top-right (via a second positioned element)
 * ::after handles bottom-right (direct) and bottom-left (via similar trick)
 *
 * Since we only have 2 pseudo-elements for 4 corners,
 * top-right and bottom-left are achieved by adding border-right to ::before
 * and border-left to ::after with repositioning.
 */

/* Reset to simple two-corner approach (top-left + bottom-right) */
/* This is the most reliable cross-browser approach */