:root {
    --repo-first: #008000;
    --repo-second: #ca5010;
    --repo-third: #5010ca;
    --tooltip-bg: #000;
    --content-width: 622px;
    --cell-size: 10px;
    --half-cell-size: calc(var(--cell-size) / 2);
    /* a "better" way is supposed to use a conic gradient,
        but it's rendered pretty poorly at such small sizes,
        so here we go again with a hardcoded colors svg */
    --productive-day: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 70 70"><g transform="translate(100,100)"><path d="M0 0 23-87A99 99 0 0 1 70 70Z" fill="%23008000"/><path d="M0 0 70 70A99 99 0 0 1-87 23Z" fill="%23ca5010"/><path d="M0 0-87 23A99 99 0 0 1 23-87Z" fill="%235010ca"/></g></svg>');
}

@media (prefers-color-scheme: dark) {
    :root {
        --repo-first: #6f0;
        --repo-second: #f60;
        --repo-third: #a4f;
        --productive-day: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="65 65 70 70"><g transform="translate(100,100)"><path d="M0 0 23-87A99 99 0 0 1 70 70Z" fill="%236f0"/><path d="M0 0 70 70A99 99 0 0 1-87 23Z" fill="%23f60"/><path d="M0 0-87 23A99 99 0 0 1 23-87Z" fill="%23a4f"/></g></svg>');
    }

    .tral {
        filter: invert(0.8);
    }
}

.container {
    width: var(--content-width);
    position: relative;
}

.tral {
    width: 400px;
    margin: 32px 0;
}

.subtitle {
    text-align: start;
}

.separator {
    border-top: 1px solid var(--fg);
}

.commit-info-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.subtitle, .separator {
    margin-bottom: 12px;
}

.separator, .commit-info-wrapper {
    width: 100%;
}

/* TODO also use nesting here? */
.grid {
    align-self: baseline;
    margin-bottom: 8px;

    display: grid;
    grid-auto-flow: column;
    grid-gap: 2px;
    grid-template-rows: repeat(7, auto);
}

.grid::before, .grid[data-end]::after {
    position: absolute;
    display: inline-block;

    opacity: 0.65;
    font-size: small;
    height: 82px;
    text-align: center;
}

.grid:hover::before, .grid[data-end]:hover::after {
    opacity: 1;
}

.grid::before {
    content: attr(data-start);

    left: -2em;

    writing-mode: sideways-lr;
    border-right: 1px solid;
}

.grid[data-end]::after {
    content: attr(data-end);

    right: -2em;

    writing-mode: sideways-rl;
    border-left: 1px solid;
}

.grid .dot {
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: 2px;

    &.none {
        background-color: var(--bg-accent);
        border: 1px solid var(--bg);
    }

    &.one {
        opacity: 0.25;
    }

    &.two {
        opacity: 0.5;
    }

    &.three {
        opacity: 0.75;
    }

    &.four {
        opacity: 1;
    }
    /* the fourth repo is not going to happen */
    &.repo-dotfiles {
        background-color: var(--repo-first);
    }

    &.repo-whatever {
        background-color: var(--repo-second);
    }

    &.repo-misc {
        background-color: var(--repo-third);
    }

    &.repo-dotfiles.repo-whatever {
        background: linear-gradient(to bottom left, var(--repo-first) 50%, var(--repo-second) 50%);
    }

    &.repo-dotfiles.repo-misc {
        background: linear-gradient(to bottom left, var(--repo-first) 50%, var(--repo-third) 50%);
    }

    &.repo-whatever.repo-misc {
        background: linear-gradient(to bottom left, var(--repo-second) 50%, var(--repo-third) 50%);
    }

    &.repo-dotfiles.repo-whatever.repo-misc {
        background: var(--productive-day);
    }
}

div.tooltip {
    position: relative;

    > div.tooltip-content {
        display: none;
        visibility: hidden;
        
        position: absolute;
        z-index: 1;
        max-width: var(--content-width);

        white-space: nowrap;
        pointer-events: none;

        padding: 8px;
        background: var(--tooltip-bg);
        color: #fff;

            > div.tooltip-arrow {
                position: absolute;
                top: calc(-1 * var(--cell-size));
                /* default for non-moving tooltips, might be changed by js */
                left: calc(50% - var(--half-cell-size));

                width: var(--cell-size);
                height: var(--half-cell-size);

                border-style: solid;
                border-width: var(--half-cell-size);
                border-color: transparent transparent var(--tooltip-bg) transparent;
            }
    }

    &:hover > div.tooltip-content {
        visibility: visible;
    }
}