/* ==========================================================================
 * Menu dividers - one style family for every surface a builder "Divider"
 * nav row renders on: org/community footer sitemap, platform footer Explore
 * column, header bar, desktop dropdowns and the mobile sub-menu. Loaded via
 * AppAsset, so both the website layout and the main (community takeover)
 * layout get the same rules.
 *
 * Markup: <li|div|span class="menu-divider menu-divider--<style>">. Default
 * orientation is horizontal (vertical stacks); add .menu-divider--vertical
 * for the inline header bar. Style keys = OrgWebsiteNav::getDividerStyleOptions().
 *
 * Tokens:
 *   --menu-divider-color   hairline color (line / fade / dotted / ornament)
 *   --menu-divider-accent  brand color (accent bar, ornament diamond, dot)
 * Both default to currentColor-derived / brand values so they theme with the
 * surrounding text in light and dark; surfaces override them below.
 * ========================================================================== */

.menu-divider {
    --menu-divider-color: color-mix(in srgb, currentColor 28%, transparent);
    --menu-divider-accent: var(--website-primary, var(--color-primary-500, currentColor));
    display: block;
    position: relative;
    pointer-events: none;
    list-style: none;
    border: 0;
    padding: 0;
}

/* Org / community website footer: follow the builder's footer border color
 * (footer_border_color -> --website-footer-border), lifted toward the footer
 * text so a thin rule stays readable on a dark footer. */
.website-footer .menu-divider {
    --menu-divider-color: color-mix(in srgb, var(--website-footer-border, transparent) 55%, currentColor 30%);
}

/* Header / dropdown surfaces use the design-system border token. */
.website-navbar .menu-divider,
.dropdown-menu .menu-divider,
.mobile-nav-subdivider.menu-divider {
    --menu-divider-color: var(--border-default, color-mix(in srgb, currentColor 22%, transparent));
}

/* ---------- Horizontal (default) ---------- */

.menu-divider--space {
    height: var(--space-3, 0.75rem);
}

.menu-divider--line,
.menu-divider--fade,
.menu-divider--accent,
.menu-divider--ornament,
.menu-divider--dotted,
.menu-divider--dot {
    margin: var(--space-3, 0.75rem) 0;
}

.menu-divider--line {
    height: 1px;
    background: var(--menu-divider-color);
}

.menu-divider--fade {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--menu-divider-color) 20%, var(--menu-divider-color) 80%, transparent);
}

.menu-divider--accent {
    width: 2rem;
    height: 3px;
    border-radius: 999px;
    background: var(--menu-divider-accent);
}

.menu-divider--ornament {
    height: 7px;
    background:
        linear-gradient(90deg, transparent, var(--menu-divider-color)) left center / calc(50% - 10px) 1px no-repeat,
        linear-gradient(90deg, var(--menu-divider-color), transparent) right center / calc(50% - 10px) 1px no-repeat;
}

.menu-divider--ornament::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: var(--menu-divider-accent);
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-divider--dotted {
    height: 3px;
    background-image: radial-gradient(circle, var(--menu-divider-color) 1.25px, transparent 1.75px);
    background-size: 8px 3px;
    background-repeat: repeat-x;
    background-position: left center;
}

.menu-divider--dot {
    height: 4px;
}

.menu-divider--dot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--menu-divider-color);
    transform: translateX(-50%);
}

/* Dropdown / mobile sub-menus: inset from the item padding. */
.dropdown-menu .menu-divider:not(.menu-divider--space),
.mobile-nav-subdivider.menu-divider:not(.menu-divider--space) {
    margin: var(--space-2, 0.5rem) var(--space-3, 1rem);
}

.dropdown-menu .menu-divider--accent,
.mobile-nav-subdivider.menu-divider--accent {
    width: 1.5rem;
}

/* ---------- Vertical (inline header bar) ---------- */

.menu-divider--vertical {
    display: inline-block;
    vertical-align: middle;
    align-self: center;
    margin: 0 var(--space-2, 0.5rem);
}

.menu-divider--vertical.menu-divider--space {
    width: var(--space-3, 0.75rem);
    height: 1px;
}

.menu-divider--vertical.menu-divider--line {
    width: 1px;
    height: 1.25rem;
}

.menu-divider--vertical.menu-divider--fade {
    width: 1px;
    height: 1.75rem;
    background: linear-gradient(180deg, transparent, var(--menu-divider-color) 25%, var(--menu-divider-color) 75%, transparent);
}

.menu-divider--vertical.menu-divider--accent {
    width: 3px;
    height: 1rem;
}

.menu-divider--vertical.menu-divider--ornament {
    width: 7px;
    height: 1.75rem;
    background:
        linear-gradient(180deg, transparent, var(--menu-divider-color)) center top / 1px calc(50% - 7px) no-repeat,
        linear-gradient(180deg, var(--menu-divider-color), transparent) center bottom / 1px calc(50% - 7px) no-repeat;
}

.menu-divider--vertical.menu-divider--dotted {
    width: 3px;
    height: 1.25rem;
    background-image: radial-gradient(circle, var(--menu-divider-color) 1.25px, transparent 1.75px);
    background-size: 3px 6px;
    background-repeat: repeat-y;
    background-position: center top;
}

.menu-divider--vertical.menu-divider--dot {
    width: 4px;
    height: 4px;
}

.menu-divider--vertical.menu-divider--dot::after {
    left: 0;
    transform: none;
}

/* ---------- Builder card previews ---------- */

.nav-divider-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.nav-divider-preview .menu-divider {
    width: 100%;
    margin: 0;
    --menu-divider-color: color-mix(in srgb, currentColor 55%, transparent);
    --menu-divider-accent: var(--color-primary-500, currentColor);
}

.nav-divider-preview .menu-divider--accent {
    width: 60%;
}

.nav-divider-preview .menu-divider--space {
    height: 1px;
    border-top: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
}