//////////////////////////////////// Tables ////////////////////////////////////

table {
  display: inline-block;
  margin: 1rem 1rem 3rem 0;
  border-spacing: 0;
  color: $article-text;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 1px 3px 10px $article-shadow;
  border-radius: ($radius);

  th, td {
    padding: .85rem 1.25rem;
  }
  thead {
    @include gradient($article-table-header, 90deg);
    background-attachment: fixed;
  }

  th  {
    color: $g20-white;
    strong { color: $g20-white; }
    &:first-child {
      border-radius: ($radius) 0 0 0;
    }
    &:last-child {
      border-radius: 0 ($radius) 0 0;
    }
  }

  td {
    font-size: 1.05rem;
    line-height: 1.5em;
    code {font-size: .95rem;}
  }

  tr{
    &:nth-child(even) {
      background: $article-table-row-alt;
    }
    &:last-child {
      td {
        &:first-child { border-radius: 0 0 0 ($radius); }
        &:last-child { border-radius: 0 0 ($radius) 0; }
      }

    }
  }

  img { margin-bottom: 0; }

  &.cloud-urls {
    a { white-space: nowrap; }
    p {
      margin: 0 0 .5rem 0;
      &:last-child { margin-bottom: 0 }
    }
    .cluster-name { font-weight: $medium; color: $article-bold; }
  }
}

table + table {
  margin-top: -1.5rem;
}

// Adjust spacing to push long-hand and short-hand columns closer together
#flags:not(.no-shorthand),
#global-flags,
.shorthand-flags {
  & + table {
    td:nth-child(2) code { margin-left: -2rem; }
  }
}

p.table-group-key {
  margin: 1rem 0 -.75rem;
  font-weight: $medium;
  font-size: .95rem;
}

table + .table-group-key {
  margin-top: -2rem;
}

// Reverse the order of InfluxDB version rows in Flux versions table
// Hugo doesn't support sorting maps (objects) by keys
table.flux-influxdb-versions tbody {
  display: flex;
  flex-direction: column-reverse;

  tr {
    display: flex;
    justify-content: space-between;
  }
}