/* FENIX v3.3 — navigation and icon-button interaction states.
   Load after the other FENIX stylesheets. */
body:has(.IndexPage, .TagsPage, .FlarumBlogOverview, .FlarumBlogItem, .DiscussionPage, .UserPage, #phoenix-deck, .pd-root, .pd-window) :is(.App-header, .App-backControl, .App-primaryControl, .Navigation, .IndexPage-toolbar, .DiscussionPage-nav, .UserPage-nav, .FlarumBlog-ToolButtons) {
  --button-bg-hover: #203e51;
  --button-bg-active: #28536a;
  --header-colored-control-bg-fadedin: #203e51;
}
body:has(.IndexPage, .TagsPage, .FlarumBlogOverview, .FlarumBlogItem, .DiscussionPage, .UserPage, #phoenix-deck, .pd-root, .pd-window) :is(.Navigation .Button, .App-backControl .Button, .App-primaryControl .Button, .App-header .Button--icon, .IndexPage-toolbar .Button--icon, .DiscussionPage-nav .Button--icon, .UserPage-nav .Button--icon, .FlarumBlog-ToolButtons .Button) {
  background: #132b3b !important;
  color: #c8e2ec !important;
  -webkit-tap-highlight-color: rgba(104, 211, 233, .16);
}
body:has(.IndexPage, .TagsPage, .FlarumBlogOverview, .FlarumBlogItem, .DiscussionPage, .UserPage, #phoenix-deck, .pd-root, .pd-window) :is(.Navigation .Button, .App-backControl .Button, .App-primaryControl .Button, .App-header .Button--icon, .IndexPage-toolbar .Button--icon, .DiscussionPage-nav .Button--icon, .UserPage-nav .Button--icon, .FlarumBlog-ToolButtons .Button):is(:hover, :focus, .focus) {
  background: #203e51 !important;
  color: #e1f7ff !important;
}
body:has(.IndexPage, .TagsPage, .FlarumBlogOverview, .FlarumBlogItem, .DiscussionPage, .UserPage, #phoenix-deck, .pd-root, .pd-window) :is(.Navigation .Button, .App-backControl .Button, .App-primaryControl .Button, .App-header .Button--icon, .IndexPage-toolbar .Button--icon, .DiscussionPage-nav .Button--icon, .UserPage-nav .Button--icon, .FlarumBlog-ToolButtons .Button):is(:active, .active, [aria-expanded="true"]) {
  background: #28536a !important;
  color: #edfbff !important;
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(113, 213, 235, .48) !important;
}
body:has(.IndexPage, .TagsPage, .FlarumBlogOverview, .FlarumBlogItem, .DiscussionPage, .UserPage, #phoenix-deck, .pd-root, .pd-window) :is(.Navigation .Button, .App-backControl .Button, .App-primaryControl .Button, .App-header .Button--icon, .IndexPage-toolbar .Button--icon, .DiscussionPage-nav .Button--icon, .UserPage-nav .Button--icon, .FlarumBlog-ToolButtons .Button):focus-visible {
  outline: 2px solid #79d5eb !important;
  outline-offset: 2px;
}