/* Shared popup contract: clip the frame, scroll its contents, keep actions visible.
   Component styles retain their own size, colour, radius and shadow. */
.ui-popup-frame {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
dialog.ui-popup-frame:not([open]), .ui-popup-frame[hidden] { display: none; }
.ui-popup-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}
:is(.ui-popup-frame, .ui-popup-layout) > :is(header, footer) { flex: 0 0 auto; }
.ui-popup-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 12px;
}
.ui-popup-frame > .ui-popup-scroll { margin: 4px; }
.ui-popup-scroll:focus-visible { outline: 2px solid var(--popup-scroll-thumb, #7185a3); outline-offset: -3px; }

/* Standard path (including Firefox). Never hide the scrollbar or change RTL. */
:is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll),
:is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) * {
  scrollbar-width: thin;
  scrollbar-color: var(--popup-scroll-thumb, #7185a3) transparent;
  scrollbar-gutter: auto;
}
/* Chromium's non-auto standard properties override its WebKit thumb styles. */
@supports selector(::-webkit-scrollbar) {
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll),
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll)::-webkit-scrollbar,
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background: transparent;
  }
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll)::-webkit-scrollbar-track,
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) *::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px;
  }
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll)::-webkit-scrollbar-thumb,
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) *::-webkit-scrollbar-thumb {
    min-width: 30px;
    min-height: 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--popup-scroll-thumb, #7185a3);
    background-clip: padding-box;
  }
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll)::-webkit-scrollbar-button,
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll)::-webkit-scrollbar-corner,
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) *::-webkit-scrollbar-corner { background: transparent; }
}
@media (forced-colors: active) {
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll),
  :is(dialog, [role="dialog"], [role="alertdialog"], [role="tooltip"], [role="listbox"], .ui-popup-scroll) * {
    --popup-scroll-thumb: CanvasText;
    scrollbar-color: auto;
  }
}