.font-sans {
    font-family: "Public Sans", sans-serif;
    font-variant-numeric: proportional-nums;
}

.relationships-table .xx-head {
    /* By default, the table headers will not align with the table rows
     * since the rows will have a scrollbar but the header will not,
     * and the scrollbar adds up to the container width.
     * So we use a combination of `scrollbar-gutter: stable` and
     * `overflow: hidden` to add a scrollbar width worth to the width of
     * the table headers.
     */
    scrollbar-gutter: stable;
    overflow: hidden;

    background-color: #fafafa;
    border: solid 1px #dae1e7;
    border-left: 0;
    border-right: 0;
}

/*
 * Component: relationships table
 */
.relationships-table [role="row"] {
    display: grid;

    /* Why minmax(0, _)?
     * Because otherwise by default the mininum width is "auto" and would cause the grid
     * to misalign.
     * See https://defensivecss.dev/tip/grid-min-content-size/
     */
    grid-template-columns: minmax(0, 15fr) minmax(0, 10fr) minmax(0, 10fr) minmax(0, 15fr) minmax(0,  7fr) minmax(0, 15fr) minmax(0,  7fr) minmax(0,  6fr) minmax(0,  6fr);
}

/* Header placement */
.relationships-table .xx-title {
    grid-template-areas: "t1 t2 t2 t3 t3 t4 t4 t5 t5";
    font-weight: bold;
}

.relationships-table .xx-title .xx-endpoint             {grid-area: t1;}
.relationships-table .xx-title .xx-cases                {grid-area: t2;}
.relationships-table .xx-title .xx-survival-analysis    {grid-area: t3;}
.relationships-table .xx-title .xx-genetic-correlations {grid-area: t4;}
.relationships-table .xx-title .xx-genetic-signals      {grid-area: t5;}

.relationships-table .xx-stat {
    grid-template-areas: "_ s1 s1 s2 s3 s4 s5 s6 s7";
}
.relationships-table .xx-stat .xx-cases         {grid-area: s1;}
.relationships-table .xx-stat .xx-sa-hr         {grid-area: s2;}
.relationships-table .xx-stat .xx-sa-extremity  {grid-area: s3;}
.relationships-table .xx-stat .xx-gc-rg         {grid-area: s4;}
.relationships-table .xx-stat .xx-gc-extremity  {grid-area: s5;}
.relationships-table .xx-stat .xx-gs-hits       {grid-area: s6;}
.relationships-table .xx-stat .xx-gs-coloc-hits {grid-area: s7;}

.relationships-table .xx-dataset {
    grid-template-areas: "_ d1 d2 d3 d3 d4 d4 d5 d5";
}
.relationships-table .xx-dataset .xx-cases-fr {grid-area: d1;}
.relationships-table .xx-dataset .xx-cases-fg {grid-area: d2;}
.relationships-table .xx-dataset .xx-sa       {grid-area: d3;}
.relationships-table .xx-dataset .xx-gc       {grid-area: d4;}
.relationships-table .xx-dataset .xx-gs       {grid-area: d5;}

.relationships-table .xx-widget {
    grid-template-areas: "w1 w2 w3 w4 w5 w6 w7 w8 w9";
}
.relationships-table .xx-widget .xx-endpoint      {grid-area: w1;}
.relationships-table .xx-widget .xx-cases-fr      {grid-area: w2;}
.relationships-table .xx-widget .xx-cases-fg      {grid-area: w3;}
.relationships-table .xx-widget .xx-sa-hr         {grid-area: w4;}
.relationships-table .xx-widget .xx-sa-extremity  {grid-area: w5;}
.relationships-table .xx-widget .xx-gc-rg         {grid-area: w6;}
.relationships-table .xx-widget .xx-gc-extremity  {grid-area: w7;}
.relationships-table .xx-widget .xx-gs-hits       {grid-area: w8;}
.relationships-table .xx-widget .xx-gs-coloc-hits {grid-area: w9;}

/* Header borders */
.relationships-table .xx-title :nth-child(n + 2),
.relationships-table .xx-cases,
.relationships-table .xx-sa-hr,
.relationships-table .xx-gc-rg,
.relationships-table .xx-gs-hits,
.relationships-table .xx-cases-fr,
.relationships-table .xx-sa,
.relationships-table .xx-gc,
.relationships-table .xx-gs
{
    border-left: 1px solid #dae1e7;
}

/* Header brandings */
.relationships-table .xx-dataset :nth-child(1),
.relationships-table .xx-dataset :nth-child(3) {
    border-top: 2px solid var(--finregistry-brand-color);
}
.relationships-table .xx-dataset :nth-child(1),
.relationships-table .xx-dataset :nth-child(3),
.relationships-table .xx-widget div:nth-of-type(2),
.relationships-table .xx-widget div:nth-of-type(4),
.relationships-table .xx-widget div:nth-of-type(5)
{
    background-color: var(--finregistry-brand-color-light);
}

.relationships-table .xx-dataset :nth-child(2),
.relationships-table .xx-dataset :nth-child(4),
.relationships-table .xx-dataset :nth-child(5)
{
    border-top: 2px solid var(--finngen-brand-color);
}
.relationships-table .xx-dataset :nth-child(2),
.relationships-table .xx-dataset :nth-child(4),
.relationships-table .xx-dataset :nth-child(5),
.relationships-table .xx-widget div:nth-of-type(3),
.relationships-table .xx-widget div:nth-of-type(6),
.relationships-table .xx-widget div:nth-of-type(7),
.relationships-table .xx-widget div:nth-of-type(8),
.relationships-table .xx-widget div:nth-of-type(9)
{
    background-color: var(--finngen-brand-color-light);
}

/* Table body */
.relationships-table .xx-body {
    max-height: 30em;
    overflow-y: scroll;
}
.relationships-table [role="colheader"] {
    padding: 0.35rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.relationships-table .xx-body [role="row"]:nth-child(2n) {
    background-color: #fafafa;
}

.relationships-table .active {
    color: white;
    background-color: #2779bd;
}


/*
 * Utilities
 */
.inline-block { display: inline-block; }
.inline {display: inline;}  /* Useful for <img> since we reset them to 'display: block' */