html > body > #grid {
  .tabs {
    /** Required arguments with purportedly ridiculous defaults */
    --element-gap: 200px;
    --element-padding-title: 200px;
    --element-title-text-decoration-line: underline;
    --element-title-text-decoration-style: solid;
    --element-title-text-decoration-thickness: 200px;
    --element-title-text-underline-offset: 200px;
    --element-zindex-curtain: 50000;
    --element-zindex-form: 49999;
    --element-color-curtain: red;
    --element-padding-content: 200px;
    --element-gap-content: 200px;
    --element-background: red;
    --element-color-icon: red;
    --element-color-secondary: red;
    --element-color-toggle: red;
    --element-border-radius: 30px;

    /** Optional arguments with sensible defaults */
    --element-color-title: inherit;
    --element-border-radius-title: none;
    --element-clip-path: none;
    --element-border-radius-content: none;

    display: flex;
    gap: var(--element-gap);
    flex-wrap: wrap;
    align-items: baseline;

    > * {
      order: 1;
    }

    > li {
      list-style: none;
    }

    > details {
      > summary {
        border-radius: var(--element-border-radius-title);
        margin: calc(var(--element-padding-title) * -1);
        padding: var(--element-padding-title);
        text-decoration-line: var(--element-title-text-decoration-line);
        text-decoration-style: var(--element-title-text-decoration-style);
        text-decoration-thickness: var(--element-title-text-decoration-thickness);
        text-underline-offset: var(--element-title-text-underline-offset);
        white-space: nowrap;
        color: var(--element-color-title);

        &:focus {
          outline-offset: 0;
        }
      }

      &[open] {
        display: contents;

        > summary {
          order: 1;
          position: relative;
          z-index: var(--element-zindex-form);
          background: var(--element-background);

          &[data-icon]:not([data-icon='']):before {
            color: var(--element-color-icon);
          }

          &:after {
            content: '✕';
            position: absolute;
            display: block;
            top: -.7rem;
            right: -.7rem;
            width: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
            border-radius: 50%;
            background: inherit;
            color: var(--element-color-icon);
          }

          &[data-icon]:not([data-icon='']):hover:before,
          &:hover:after {
            color: unset;
          }
        }

        @supports not (selector(&::details-content)) {
          & > :not(summary) {
            flex-grow: 1;
            width: 100%;
            order: 3;
            position: relative;
            z-index: var(--element-zindex-form);
            background: var(--element-background);
            clip-path: var(--element-clip-path);
            border-radius: var(--element-border-radius-content);
            padding: var(--element-padding-content);
            display: flex;
            flex-direction: column;
            gap: var(--element-gap-content);
          }
        }

        @supports selector(&::details-content) {
          &::details-content {
            flex-grow: 1;
            width: 100%;
            order: 3;
            position: relative;
            z-index: var(--element-zindex-form);
            background: var(--element-background);
            clip-path: var(--element-clip-path);
            border-radius: var(--element-border-radius-content);
            padding: var(--element-padding-content);
            display: flex;
            flex-direction: column;
            gap: var(--element-gap-content);
          }
        }
      }
    }

    > label {
      cursor: pointer;
      color: var(--element-color-toggle);
      background: var(--element-color-secondary);
      border-radius: var(--element-border-radius);
      padding-inline: var(--element-padding-title);
      display: none;

      > input[type=checkbox] {
        display: none;
      }
    }

    &:has(
    > details[data-flags~=secondary]
  ):not(
    :has(> details[data-flags~=secondary][data-flags~=has_errors])
  ) {
      > label {
        display: block;
        order: 2;

        &:has(> input[type=checkbox]:not(:checked))::after {
          content: '···';
        }

        &:has(> input[type=checkbox]:checked)::after {
          content: '−';
        }
      }

      &:has(> label > input[type=checkbox]:not(:checked)) {
        > details[data-flags~=secondary]:not([data-flags~=has_errors]) {
          display: none;
        }
      }
    }

    &.tabs-modal {
      > details {
        &[open]:before {
          content: '';
          width: 100lvw;
          height: 100lvh;
          position: fixed;
          top: 0;
          left: 0;
          z-index: var(--element-zindex-curtain);
          background: var(--element-color-curtain);
          cursor: default;
        }
      }
    }
  }
}