@layer modules {

  @keyframes slide-down-and-in-animation {
    0% {
      transform: translateY(calc(-1 * var(--scale-3)));
      opacity: 0.3;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .microbe {
    :is(ul, div).menu {
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;

      box-shadow: var(--scale-2) var(--scale-2) var(--scale-4) 0 hsl(from var(--shadow-color) h s l / 0.2),
        calc(var(--scale-2) * -1) var(--scale-2) var(--scale-4) 0 hsl(from var(--shadow-color) h s l / 0.2);

      color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
      background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));

      margin: 0;
      padding: 0;
      padding-block: var(--scale-3);
      margin-block-start: var(--scale-1);
      min-width: var(--scale-10);

      border: var(--border-width) solid hsl(var(--neutral-hue) var(--neutral-saturation) var(--lightness-4));
      border-radius: var(--scale-2);

      &:popover-open {
        animation: slide-down-and-in-animation 80ms ease-out;
      }

      &>ul {
        margin: 0;
        padding: 0;

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

      &>ul>li,
      &>li {
        list-style-type: none;
        padding: 0;

        &>:is(a, button) {
          display: block;
          width: 100%;
          box-sizing: border-box;
          padding: var(--scale-4) var(--scale-5);
          color: hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness));
          background: hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness));
          text-align: start;
          border: none;
          border-inline-start: var(--scale-2) solid transparent;

          &:focus,
          &:hover {
            text-decoration: none;
            background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-1));
          }

          &:focus {
            border-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-4));
            outline: none;
          }

          &[role=menuitemradio][aria-checked=true] {
            border-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-6));
          }
        }
      }
    }
  }
}