/* Keep interaction colors consistent with page-specific button styles. */
@layer portal-button-states {
  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      [role="button"], a.menu-link, a.navbutton, a.portal-close, #receipt-qr-link,
      #receipt-qr-download, nav summary):not(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
    background-color: #dceeff !important;
    border-color: #5a93c7 !important;
    color: #153a62 !important;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      [role="button"], a.menu-link, a.navbutton, a.portal-close, #receipt-qr-link,
      #receipt-qr-download, nav summary):not(:disabled, [aria-disabled="true"]):focus-visible {
    outline: 2px solid #235f99 !important;
    outline-offset: 2px;
  }

  :is(button, input[type="button"], input[type="submit"], input[type="reset"],
      [role="button"], a.menu-link, a.navbutton, a.portal-close, #receipt-qr-link,
      #receipt-qr-download, nav summary):not(:disabled, [aria-disabled="true"]):active {
    background-color: #bfdfff !important;
    border-color: #407ab0 !important;
    color: #153a62 !important;
  }
}