/*
  Generic dropdown open/closed state (dropdown_controller). Each menu defines
  its own closed look (position, opacity:0, scale:95%, transition) in its
  feature file; the controller toggles [data-dropdown-open] on the root and the
  menu/arrow animate to the open state here. Works for every dropdown instance
  via the shared data-* targets.
*/

@layer modules {
  [data-controller~="dropdown"] [data-dropdown-target="arrow"] {
    transition: rotate 0.2s var(--default-transition-timing-function);
  }

  [data-controller~="dropdown"][data-dropdown-open] [data-dropdown-target="menu"] {
    opacity: 1;
    scale: 100%;
  }

  [data-controller~="dropdown"][data-dropdown-open] [data-dropdown-target="arrow"] {
    rotate: 180deg;
  }
}