/**
 * Border Effects — Double Borders
 *
 * Uses real border + inset box-shadow for double line effect.
 * Works with border-radius. No pseudo-elements consumed.
 */

/* ==========================================================================
   Double Border Presets (3)
   ========================================================================== */

/* Classic — same color, transparent gap */
.border-fx-double-classic {
    border: var(--border-fx-outer-width, 1px) solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
    box-shadow:
        inset 0 0 0 var(--border-fx-gap, 3px) transparent,
        inset 0 0 0 calc(var(--border-fx-gap, 3px) + var(--border-fx-inner-width, 1px)) color-mix(in oklch, var(--color-base-content) 20%, transparent);
}

/* Contrast — different colors (primary + base-content) */
.border-fx-double-contrast {
    border: var(--border-fx-outer-width, 1px) solid var(--color-primary);
    box-shadow:
        inset 0 0 0 2px transparent,
        inset 0 0 0 calc(2px + var(--border-fx-inner-width, 1px)) color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

/* Inset — both base-content, inner thinner, with base-200 gap */
.border-fx-double-inset {
    border: var(--border-fx-outer-width, 1px) solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
    box-shadow:
        inset 0 0 0 4px var(--color-base-200),
        inset 0 0 0 5px color-mix(in oklch, var(--color-base-content) 15%, transparent);
}

/* ==========================================================================
   Intensity Adjustments for Double
   ========================================================================== */

.border-fx-sm.border-fx-double-classic,
.border-fx-sm.border-fx-double-contrast,
.border-fx-sm.border-fx-double-inset {
    --border-fx-outer-width: 1px;
    --border-fx-inner-width: 1px;
    --border-fx-gap: 2px;
}

.border-fx-lg.border-fx-double-classic,
.border-fx-lg.border-fx-double-contrast,
.border-fx-lg.border-fx-double-inset {
    --border-fx-outer-width: 2px;
    --border-fx-inner-width: 2px;
    --border-fx-gap: 4px;
}