@forward "../shared/workleaves";

body {
    --family-tree-connectors-color: var(--background-secondary);
}

.callout[data-callout="family-tree"] {
    --callout-icon: lucide-network;
}

.callout[data-callout="family-tree"] > .callout-content > ul,
.family-tree .el-ul > ul,
.family-tree > * > ul {
    --list-spacing: 0;
    --list-indent: 0;

    overflow-x: scroll;

    .list-bullet {
        display: none;
    }

    // Collapse-indicator
    .list-collapse-indicator {
        position: absolute;
        opacity: 1;
        top: 10px;
        left: 50%;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--workleaves-background);
        border: 1px solid var(--color-accent);
        z-index: 1;
    }
    .list-collapse-indicator.is-collapsed {
        background: var(--color-accent);
    }
    .list-collapse-indicator svg {
        display: none;
    }

    // When collapsed
    li.is-collapsed {
        text-wrap: nowrap;
    }
    li.is-collapsed > ul > * {
        display: none;
    }

    // Spouse info tooltip
    :is(.tag[href="#wed"], .wed) {
        display: none;
    }
    :is(.tag[href="#wed"], .wed) + ul > li:first-child {
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
        background-color: rgba(0, 0, 0, 0.9);
        color: #ccc;
        font-size: var(--font-ui-small);
        padding: 5px 12px;
        text-align: center;
        z-index: var(--layer-tooltip);
        top: 0;
    }
    :is(.tag[href="#wed"], .wed) + ul > li:first-child::before {
        content: "Wed to ";
        display: unset;
        position: unset;
        color: #727272;
    }

    // Spouse ring icon
    li:has(> .tag[href="#wed"], > .wed) > .list-bullet {
        display: inline-block;
        float: none;
        margin-inline-start: 0;
        margin-inline-end: 0.1em;
        transform: translateY(-0.2em);
    }
    li:has(> .tag[href="#wed"], > .wed) > .list-bullet::after {
        content: "💍";
        position: static;
        margin: 0;
        padding: 0;
        font-size: 10px;
        -webkit-mask-image: none;
        background: none;
        box-shadow: none;
    }

    // element with no child, or only a spouse (#wed)
    li:not(:has(ul)),
    li:has(> .tag[href="#wed"] + ul > li:only-child, > .wed + ul > li:only-child) {
        text-wrap: nowrap;
        .list-collapse-indicator {
            display: none;
        }
    }

    ul:not(:has(ul))::before,
    :is(.tag[href="#wed"], .wed) + ul:has(> li:only-child)::before {
        height: 30px;
    }

    li:not(:has(ul))::after,
    li:has(> .tag[href="#wed"] + ul > li:only-child, > .wed + ul > li:only-child)::after {
        height: 20px;
    }

    &,
    ul {
        display: flex;
        padding-top: 10px;
        margin-top: 0px;
        position: relative;
    }

    li {
        float: left;
        text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;
        margin-inline: auto;
        flex-grow: 1;
    }

    li::before,
    li::after {
        content: "";
        position: absolute;
        top: 0;
        right: 50%;
        border-top: 1px solid var(--family-tree-connectors-color);
        width: 50%;
        height: 10px;
    }

    :is(.tag[href="#wed"], .wed) + ul > li:first-child::after {
        content: none;
    }

    li::after {
        right: auto;
        left: 50%;
        border-left: 1px solid var(--family-tree-connectors-color);
    }

    // Remove left-right connectors from elements without any siblings
    li:only-child::after,
    li:only-child::before {
        display: none;
    }

    // Remove left connector from first child and connector from last child
    :is(.tag[href="#wed"], .wed) + ul > li:nth-child(2)::before,
    li:first-child::before,
    li:last-child::after {
        border-top: none;
    }

    // Remove space from the top of single children
    li:only-child {
        padding-top: 0;
    }

    // Add downward connectors from parents
    ul::before {
        content: "";
        position: absolute;
        top: 0;
        right: 50%;
        border-left: 1px solid var(--family-tree-connectors-color);
        width: 0px;
        height: 20px;

        inset-inline-start: unset;
        bottom: unset;
        border-inline-end: unset;
    }

    // Reduce heights for downward connectors if multiple childs
    :is(.tag[href="#wed"], .wed) + ul:has(> li:nth-child(3))::before {
        height: 10px;
    }

    // Remove downward connectors if no child
    ul:not(:has(> li))::before,
    :is(.tag[href="#wed"], .wed) + ul:has(> li:only-child)::before {
        content: none;
    }

    // Remove upwards connectors if only child
    ul:not(.tag[href="#wed"], .wed + ul) > li:only-child::after,
    :is(.tag[href="#wed"], .wed) + ul > li:nth-child(2):last-child::after {
        content: none;
    }
}

@media (hover: hover) {
    .callout[data-callout="family-tree"] > .callout-content > ul,
    .family-tree .el-ul > ul {
        .list-collapse-indicator:hover {
            background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 70%);
        }
        .list-collapse-indicator.is-collapsed:hover {
            background: color-mix(in srgb, var(--color-accent), var(--workleaves-background) 30%);
        }
        li:has(> .tag[href="#wed"], > .wed):has(> .list-bullet:hover) > ul > li:first-child {
            display: block;
        }
    }
}

@media print {
    .callout[data-callout="family-tree"] ul,
    .family-tree ul {
        --family-tree-connectors-color: var(--text-normal);
    }
}
