@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  /* The wrapper anchors the popup below the trigger */
  .menu {
    position: relative;
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .menu__caret {
    transition: rotate var(--duration-fast) ease-in-out;

    .menu:has(.menu__popup[open]) & {
      rotate: 180deg;
    }
  }

  @media print {
    .menu { display: none; }
  }
}