/*
  Tab panel enter/leave animations (tabs_controller). The active/inactive tab
  look is configured per-instance via the controller's static classes (e.g. the
  sessions list uses .sessions-list__tab--active/--inactive from sessions.css).
  Panel animations reuse the tab-enter / tab-leave keyframes in animations.css.
*/

@layer modules {
  [data-controller~="tabs"] [data-tabs-target="panel"].tabs__panel--enter {
    animation: tab-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-controller~="tabs"] [data-tabs-target="panel"].tabs__panel--leave {
    animation: tab-leave 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-controller~="tabs"] [data-tabs-target="panel"]:is(.tabs__panel--enter, .tabs__panel--leave) {
      animation-duration: 0.01ms;
    }
  }
}