body.wrapped-tabs {
  .tabs {
    ul {
      grid-template-columns: repeat(auto-fill, minmax(var(--tab-width, 180px), 1fr));
      grid-auto-flow: row;
      grid-auto-columns: unset;
      gap: 0;
      column-gap: 5px;
    }

    ul li {
      border-radius: 0;
    }
  }
}

.tabs {
  // Take the full width of the centered content column so the wrap-detector JS
  // (see base.html) has the real available space to measure against. Without
  // this, align-items:center on .content-main shrinks .tabs to its intrinsic
  // width and the auto-fill grid in wrapped mode has nothing to fill.
  //width: 100%;
  //align-self: stretch;

  ul {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 5px;
    list-style: none;

    li {
      white-space: nowrap;
      color: var(--color-text-tab);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background-color: var(--color-background-tab);

      &:not(.active) {
        &:hover {
          background-color: var(--color-background-tab-hover);
        }
      }

      &.active,
      :target {
        background-color: var(--color-background);

        a {
          color: var(--color-text-tab-active);
          font-weight: bold;
        }
      }

      a {
        display: block;
        padding: 0.7em;
        color: var(--color-text-tab);
      }
    }
  }
}
