/**
 * Border Effects — Decorative Frame Borders
 *
 * Layered borders creating frame depth.
 * Uses ::before for inner border and ::after for corner ornaments.
 *
 * NOTE: Consumes both pseudo-elements — cannot combine with
 * animated or corner effects.
 */

/* ==========================================================================
   Frame Base
   ========================================================================== */

[class*="border-fx-frame"] {
    position: relative;
    border: var(--border-fx-width, 1px) solid var(--border-fx-frame-color, color-mix(in oklch, var(--color-base-content) 20%, transparent));
}

/* Inner border via ::before */
[class*="border-fx-frame"]::before {
    content: '';
    position: absolute;
    inset: var(--border-fx-frame-offset, 6px);
    border: var(--border-fx-inner-width, 1px) solid var(--border-fx-frame-color, color-mix(in oklch, var(--color-base-content) 20%, transparent));
    border-radius: inherit;
    pointer-events: none;
}

/* Corner ornaments via ::after */
[class*="border-fx-frame"]::after {
    content: '';
    position: absolute;
    inset: calc(var(--border-fx-frame-offset, 6px) / 2);
    pointer-events: none;
}

/* ==========================================================================
   Frame Presets (4)
   ========================================================================== */

/* Classic — double line with subtle corners */
.border-fx-frame-classic {
    --border-fx-frame-offset: 6px;
    --border-fx-frame-color: color-mix(in oklch, var(--color-base-content) 20%, transparent);
    --border-fx-width: 2px;
    --border-fx-inner-width: 1px;
}
.border-fx-frame-classic::after {
    border: none;
    background: none;
}

/* Art Deco — geometric, luxury */
.border-fx-frame-art-deco {
    --border-fx-frame-offset: 8px;
    --border-fx-frame-color: color-mix(in oklch, var(--color-primary) 40%, transparent);
    --border-fx-width: 1px;
    --border-fx-inner-width: 1px;
}
.border-fx-frame-art-deco::after {
    inset: 3px;
    border: none;
    background:
        linear-gradient(color-mix(in oklch, var(--color-primary) 30%, transparent), color-mix(in oklch, var(--color-primary) 30%, transparent)) top left / 12px 12px no-repeat,
        linear-gradient(color-mix(in oklch, var(--color-primary) 30%, transparent), color-mix(in oklch, var(--color-primary) 30%, transparent)) top right / 12px 12px no-repeat,
        linear-gradient(color-mix(in oklch, var(--color-primary) 30%, transparent), color-mix(in oklch, var(--color-primary) 30%, transparent)) bottom left / 12px 12px no-repeat,
        linear-gradient(color-mix(in oklch, var(--color-primary) 30%, transparent), color-mix(in oklch, var(--color-primary) 30%, transparent)) bottom right / 12px 12px no-repeat;
}

/* Minimal — thin outer + inner offset lines */
.border-fx-frame-minimal {
    --border-fx-frame-offset: 4px;
    --border-fx-frame-color: color-mix(in oklch, var(--color-base-content) 15%, transparent);
    --border-fx-width: 1px;
    --border-fx-inner-width: 1px;
}
.border-fx-frame-minimal::after {
    border: none;
    background: none;
}

/* Ornate — decorative corner flourishes */
.border-fx-frame-ornate {
    --border-fx-frame-offset: 10px;
    --border-fx-frame-color: color-mix(in oklch, var(--color-primary) 30%, transparent);
    --border-fx-width: 2px;
    --border-fx-inner-width: 1px;
}
.border-fx-frame-ornate::after {
    inset: 4px;
    border: none;
    background:
        radial-gradient(circle at top left, color-mix(in oklch, var(--color-primary) 30%, transparent) 3px, transparent 3px) top left / 8px 8px no-repeat,
        radial-gradient(circle at top right, color-mix(in oklch, var(--color-primary) 30%, transparent) 3px, transparent 3px) top right / 8px 8px no-repeat,
        radial-gradient(circle at bottom left, color-mix(in oklch, var(--color-primary) 30%, transparent) 3px, transparent 3px) bottom left / 8px 8px no-repeat,
        radial-gradient(circle at bottom right, color-mix(in oklch, var(--color-primary) 30%, transparent) 3px, transparent 3px) bottom right / 8px 8px no-repeat;
}

/* ==========================================================================
   Frame Intensity Adjustments
   ========================================================================== */

.border-fx-sm[class*="border-fx-frame"] {
    --border-fx-width: 1px;
    --border-fx-inner-width: 1px;
    --border-fx-frame-offset: 4px;
}

.border-fx-lg[class*="border-fx-frame"] {
    --border-fx-width: 3px;
    --border-fx-inner-width: 2px;
    --border-fx-frame-offset: 8px;
}