:root {
  --brand-color: var(--he-logo);
  --ff-border-color: color-mix(in hsl, color-mix(in hsl, var(--brand-color), var(--ts3d-lt-grey)) 40%, white);
  --ff-header-color: hsl(from var(--brand-color) h s calc(l / 3));
  --ff-th-bg-color: color-mix(in hsl, color-mix(in hsl, var(--brand-color), var(--ts3d-lt-grey)) 20%, white);
  --ff-td-bg-color: hsl(from var(--brand-color) h calc(s / 6) calc(l * 3.1));
  --ff-transition-timing: 0.15s;
  --ff-icon-color: var(--ts3d-lt-grey);
  --ff-supported: #6c6;
  --ff-unsupported: var(--ts3d-lt-grey);
  --ff-not-supported: #c33;
}

.tagline + ul {
    height: 100px;
}

.format-title-block {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;
  margin: auto;

  colgroup {
    display: none;
  }
  
  th,
  td {
    padding: 10px;
    width: 50%;
    text-align: center;
  }
  
  tr:first-child td {
    text-transform: uppercase;
  }
}

/* tables in sample page */
table.sample-location tr th:nth-child(1),
table.sample-location tr td:nth-child(1) {
    font-weight: bold;
}
table.sample-location tr th:nth-child(2),
table.sample-location tr td:nth-child(2) {
    font-style: italic;
}
table.samples td {
    text-align: center;
}

/* Tables in the archive page. */
/* This makes them look like bullet list but keep the column alignement tables */ 
/* give. My way of doing CSS seem sooo 2000's! */
#hoops-exchange-documentation-archives table,
#hoops-exchange-documentation-archives tr,
#hoops-exchange-documentation-archives td,
#hoops-exchange-documentation-archives th {
  text-align: left;
  border: none;
  background: none;
  padding: 0;
  font-size: 100%;
  font-weight: 400;
}

#hoops-exchange-documentation-archives tr {
  height: 24px;
}

#hoops-exchange-documentation-archives th {
  font-weight: 700;
}

#hoops-exchange-documentation-archives td:last-child {
  padding-left: 10px;
}

#hoops-exchange-documentation-archives th.stub::before {
  content: "• ";
}

#hoops-exchange-documentation-archives th.stub::after {
  content: ":";
}


/* DOC-3240: File Formats responsive tables */
#file-formats, 
#exporting-a-3d-model,
.format-title-block {
  a {
    transition: var(--ff-transition-timing);
  }
}



i[class*="fa-"][class*="supported"] {
    font-size: 1rem;
    transition: var(--ff-transition-timing);
      color: transparent;
      background: linear-gradient(
        to bottom,
        var(--ff-icon-color),
        hsl(from var(--ff-icon-color) h s calc(l / 1.25))
      );
      background-clip: text;
    

    &.fa-play {
      transform: rotate(-90deg);
      background-image: linear-gradient(
        to right,
        hsl(from var(--ff-icon-color) h s calc(l / 1.25)),
        var(--ff-icon-color)
      );
    }

    &.supported {
      --ff-icon-color: var(--ff-supported);
    }

    &.unsupported {
      --ff-icon-color: var(--ff-unsupported);
    }

    &.not-supported {
      --ff-icon-color: var(--ff-not-supported);
    }
}

#file-formats {
  container: table / inline-size;

  .wy-table-responsive:not(:has(.footnote)) {
    overflow: unset;
  }

  table {
    width: 100%;

    caption,
    colgroup {
      display: none;
    }
  }

  .wy-table-responsive.footnote + .wy-table-responsive.footnote table.footnote {
    border-top: none;
  }

  table.footnote {
    tr {
      display: flex;
    }

    td {
      white-space: initial;
      
      &:first-child {
        min-width: 3.5rem;
        text-align: right;
      }

      + td {
        flex-grow: 1;
        border-left: none;
      }
    }
  }

  table:not(.footnote) {
    margin-bottom: 1.25rem;
    border: 1px solid var(--ff-border-color); 

    th, td {
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      vertical-align: top;
      white-space: initial;
      background: none;
      border: none;
    }

    td:first-child {
      text-wrap: nowrap;
    }

    td:nth-child(4) {
      i + i {
        display: inline-block;
        margin-left: clamp(.125ch, 1vw, 1ch);
      }
    }

    tbody tr:hover,
    tbody *:has(:focus) {
      td {
        color: black;
      }

      i {
        background-image: linear-gradient(
          to bottom,
          hsl(from var(--ff-icon-color) h s calc(l / 1.25)),
          hsl(from var(--ff-icon-color) h s calc(l / 1.25))
        );
      }
    }

    th a.footnote-reference {
      position: absolute;
      top: .5rem;
    }
  }
}

@container table (width < 75ch) {
  #file-formats {
    table:not(.footnote) {
      border-top-width: 0;

      thead {
        display: none;
      }
      
      tbody {
        scroll-snap-type: y mandatory;
      }

      tr {
        display: grid;
        grid-template-areas:
          "name name plat"
          "ver ver ver"
          "ext ext ext"
          "tess brep pmi";
        grid-template-columns: repeat(2, auto) 1fr;
        scroll-snap-align: start;
      }

      td {
        &::before {
          display: inline-block;
          margin-right: 1ch;
          font-size: 75%;
          text-transform: uppercase;
          font-weight: bold;
          color: var(--ff-header-color);
        }

        &:first-child,
        &:nth-child(4) {
          position: sticky;
          top: 0;
          border: 1px solid var(--ff-border-color);
          border-width: 1px 0;
        }

        &:first-child {
          grid-area: name;
          font-weight: bold;
          background: var(--ff-th-bg-color);
          border-bottom: 1px solid var(--ff-border-color);
        }

        &:nth-child(2) {
          grid-area: ver;
          
          &::before {
            content: "Version(s):";
          }
        }

        &:nth-child(3) {
          grid-area: ext;
          
          &::before {
            content: "Extension(s):";
          }
        }

        &:nth-child(4) {
          grid-area: plat;
          text-align: end;
          background: var(--ff-th-bg-color);
          border-bottom: 1px solid var(--ff-border-color);
        }

        &:nth-child(n + 5) {
          display: flex;
          align-items: center;
        }

        &:nth-child(5) {
          grid-area: tess;
          
          &::before {
            content: "Tessellation:";
          }
        }

        &:nth-child(6) {
          grid-area: brep;
          
          &::before {
            content: "BRep:";
          }
        }

        &:nth-child(7) {
          grid-area: pmi;
          
          &::before {
            content: "PMI:";
          }
        }
      }
    }
  }
}

@container table (width >= 75ch) {
  #file-formats {
    table:not(.footnote) {
      position: relative;
      
      thead {
        position: sticky;
        top: 0;
        z-index: 2;
      }

      tbody {
        position: relative;
      }
      
      tr + tr {
        border-top: 1px solid var(--ff-border-color);
      }
      
      th,
      td {
        &:first-child,
        &:nth-child(2) {
          max-width: 20%;
        }

        &:nth-child(3),
        &:nth-child(4) {
          width: clamp(10ch, 15%, 20ch);
        }

        &:nth-child(n + 5) {
          width: clamp(5ch, 10%, 15ch);
          text-align: center;
        }
      }

      th {
        text-align: left;
        color: var(--ff-header-color);
        background: linear-gradient(to bottom, var(--ff-th-bg-color) calc(100% - 1px), var(--ff-border-color));
        border-bottom: 1px solid var(--ff-border-color);

        &:nth-child(5) {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      tr:nth-child(even) {
        background: var(--ff-td-bg-color);
      }

      td:nth-child(4) {
        display: flex;
        flex-wrap: nowrap;
      }  
    }
  }
}

/* End DOC-3240 */

html.writer-html4 .rst-content dl:not(.docutils) > dt, html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
  background: none;
  display: block;
  font-size: 100%;
  padding-left: 0
}

