/* =========================================================================
   White Separator Lines for Grid / Flex layouts
   白色分隔线工具类（用于在 flex / grid 布局元素之间生成白色分隔线）
   ========================================================================= */

/* ---------- 基础样式（网格 + 弹性布局共用） ---------- */
.separator-grid,
.separator-flex {
    /* 可覆盖变量：
       --sep-color 分隔线颜色（默认白色半透明）
       --sep-width 分隔线粗细（默认 1px） */
    --sep-color: rgba(255, 255, 255, 0.3);
    --sep-width: 1px;
}

.separator-grid > *,
.separator-flex > * {
    border-style: solid;
    border-width: 0;
    border-color: var(--sep-color);
}

/* =========================================================================
   Grid 布局分隔线
   =========================================================================
   用法（以 4 列为例），需与容器网格列数对应：
     <div class="grid grid-cols-4 separator-grid separator-grid-cols-4">
       <div>...</div>
       <div>...</div>
       <div>...</div>
       <div>...</div>
     </div>
   规则：
     - 除第一列元素外，其余元素左侧加竖线
     - 除第一行元素外，其余元素顶部加横线
     - 容器 gap 置 0，由边框承担间距
   ========================================================================= */

.separator-grid {
    gap: 0;
}

/* 2 列 */
.separator-grid-cols-2 > *:not(:nth-child(2n + 1)) { border-left-width: var(--sep-width); }
.separator-grid-cols-2 > *:nth-child(n + 3)        { border-top-width: var(--sep-width); }

/* 3 列 */
.separator-grid-cols-3 > *:not(:nth-child(3n + 1)) { border-left-width: var(--sep-width); }
.separator-grid-cols-3 > *:nth-child(n + 4)        { border-top-width: var(--sep-width); }

/* 4 列 */
.separator-grid-cols-4 > *:not(:nth-child(4n + 1)) { border-left-width: var(--sep-width); }
.separator-grid-cols-4 > *:nth-child(n + 5)        { border-top-width: var(--sep-width); }

/* 5 列 */
.separator-grid-cols-5 > *:not(:nth-child(5n + 1)) { border-left-width: var(--sep-width); }
.separator-grid-cols-5 > *:nth-child(n + 6)        { border-top-width: var(--sep-width); }

/* 6 列 */
.separator-grid-cols-6 > *:not(:nth-child(6n + 1)) { border-left-width: var(--sep-width); }
.separator-grid-cols-6 > *:nth-child(n + 7)        { border-top-width: var(--sep-width); }

/* =========================================================================
   Flex 布局分隔线
   =========================================================================
   用法：
     <div class="flex separator-flex">
       <div>...</div>
       <div>...</div>
     </div>
   规则：除第一个子元素外，其余元素左侧加竖线（适合单行横向排列）
   ========================================================================= */

.separator-flex > *:not(:first-child) {
    border-left-width: var(--sep-width);
}