.tabs {
  --tabGirth: 12px;

  > ul {
    display: flex;
    list-style: none;
    margin-inline-start: 1rem; /* hugging the left looks weird */
    overflow-inline: auto;
    overflow-block: clip; /* single direction hidden overflow! */
    scrollbar-width: thin; /* TODO: better -webkit- styles */
    padding: 8px 8px 0 8px; /* for the shadows when overflow */
    > li {
      filter: drop-shadow(0 0 4px lch(0% 0 0 / 0.2));
      &:not(:first-child) {
        @supports (clip-path: shape(from top left, hline to 0)) {
          margin-inline-start: calc(var(--tabGirth) * 2 * -1);
        }
      }
      &.active {
        z-index: 2;
        > a {
          background: light-dark(white, black);
          color: light-dark(black, white);
        }
      }
      > a {
        display: inline-block;
        white-space: nowrap;
        padding: 0.5rem 2rem;
        @supports not (clip-path: shape(from top left, hline to 0)) {
          padding-inline: 1rem;
          border-start-start-radius: var(--tabGirth);
          border-start-end-radius: var(--tabGirth);
        }
        position: relative;
        background: #ffa726;
        color: #3c1800;
        font-weight: 800;
        text-decoration: none;
        clip-path: shape(
          from bottom left,
          curve to var(--tabGirth) calc(100% - var(--tabGirth)) with
            var(--tabGirth) 100%,
          vline to var(--tabGirth),
          curve to calc(var(--tabGirth) * 2) 0 with var(--tabGirth) 0,
          hline to calc(100% - calc(var(--tabGirth) * 2)),
          curve to calc(100% - var(--tabGirth)) var(--tabGirth) with
            calc(100% - var(--tabGirth)) 0,
          vline to calc(100% - var(--tabGirth)),
          curve to 100% 100% with calc(100% - var(--tabGirth)) 100%
        );

        transition: translate 0.1s;
        &:hover {
          translate: 0 2px;
        }
        &:active {
          translate: 0 4px;
        }
        &:focus {
          /* clip-path cuts off outline otherwise */
          outline-offset: -4px;
        }
      }
    }
  }
}

.tab-content {
  background: light-dark(white, black);
  color: light-dark(black, white);
  z-index: 100;
  position: relative;
  margin-block-start: -1px;
  padding: 2rem;
  border-radius: 11px;
  box-shadow: 0 5px 4px lch(0% 0 0 / 0.2);
  > div {
    display: none;
  }
  .active {
    display: block;
  }
}

html {
  background: #ffe082;
}