body > #grid > menu,
body > #grid > main > aside {
  /** 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-color-title: 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-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;

      &: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;
      }

      > 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;
      }
    }
  }
}