@layer modules {
  .microbe .accordion {
    interpolate-size: allow-keywords;

    border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
    border-radius: var(--scale-3);
    overflow: hidden;

    --mc-padding-block: var(--padding-block, var(--scale-5));
    --mc-padding-inline: var(--padding-inline, var(--scale-6));

    &>details {
      padding: var(--mc-padding-block) var(--mc-padding-inline);
      padding-block-end: 0;

      &::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
          block-size 0.3s ease,
          content-visibility 0.3s ease allow-discrete;
      }

      &>summary {
        list-style-type: none;
        padding: var(--mc-padding-block) var(--mc-padding-inline);
        margin: calc(-1 * var(--mc-padding-block)) calc(-1 * var(--mc-padding-inline));
        margin-block-end: 0;
        background-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
        color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
        outline: none;
        user-select: none;
        cursor: pointer;
        transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
        position: relative;

        &:focus-visible {
          color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
          background-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-1));
          transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out;
          outline: none;
        }
      }

      &>summary {
        &+* {
          margin-block-start: var(--scale-2);
        }

        &::after {
          content: "";
          background-color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-8));
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>');
          position: absolute;
          display: block;
          inset-inline-end: var(--mc-padding-block);
          inset-block-start: calc(var(--mc-padding-block) + (var(--line-height) * 1em - 16px) /2);
          height: 16px;
          width: 16px;
          transition: transform 0.2s ease-in-out;
        }
      }

      &[open] {
        padding-block-end: var(--mc-padding-block);

        &::details-content {
          block-size: auto;
        }

        &>summary {

          &::after {
            transform: rotate(90deg);
          }
        }
      }
    }

    &>details+details {
      border-block-start: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-3));
    }
  }
}