/**
 * @file
 * Popovers (native [popover], top layer): menus and phone sheets.
 */

:where(.gdrfad-dds) .dds-popover,
.gdrfad-dds-embedded .dds-popover {
  min-inline-size: 200px;
  margin: 0;
  padding: var(--padding-padding-sm);
  border: 1px solid var(--surface-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-surface);
  color: var(--surface-on-surface);
  box-shadow: var(--elevation-3);
}

:where(.gdrfad-dds) .dds-popover--menu,
.gdrfad-dds-embedded .dds-popover--menu {
  display: none;
  flex-direction: column;
  gap: 2px;
}

:where(.gdrfad-dds) .dds-popover--menu:popover-open,
.gdrfad-dds-embedded .dds-popover--menu:popover-open {
  display: flex;
}

:where(.gdrfad-dds) .dds-popover__item,
.gdrfad-dds-embedded .dds-popover__item {
  display: flex;
  align-items: center;
  gap: var(--gap-gap-md);
  inline-size: 100%;
  min-block-size: 44px;
  margin: 0;
  padding-inline: var(--padding-padding-md);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--surface-on-surface);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  text-align: start;
  cursor: pointer;
}

:where(.gdrfad-dds) .dds-popover__item:hover,
.gdrfad-dds-embedded .dds-popover__item:hover {
  background: var(--surface-surface-container-high);
}

:where(.gdrfad-dds) .dds-popover__item[aria-checked="true"],
.gdrfad-dds-embedded .dds-popover__item[aria-checked="true"] {
  background: var(--primary-primary-variant);
  color: var(--primary-on-primary-variant);
  font-weight: 700;
}

:where(.gdrfad-dds) .dds-popover__item:focus-visible,
.gdrfad-dds-embedded .dds-popover__item:focus-visible {
  outline-offset: -2px;
}

:where(.gdrfad-dds) .dds-popover__check,
.gdrfad-dds-embedded .dds-popover__check {
  margin-inline-start: auto;
  visibility: hidden;
}

:where(.gdrfad-dds) .dds-popover__item[aria-checked="true"] .dds-popover__check,
.gdrfad-dds-embedded .dds-popover__item[aria-checked="true"] .dds-popover__check {
  visibility: visible;
}

/* Sheet: centred panel from 768px, a bottom sheet on phones. */
:where(.gdrfad-dds) .dds-popover--sheet,
.gdrfad-dds-embedded .dds-popover--sheet {
  inline-size: min(560px, calc(100vw - 2 * var(--page-gutter)));
  max-block-size: min(80vh, 720px);
  margin: auto;
  padding: var(--padding-padding-xl);
  overflow: auto;
}

:where(.gdrfad-dds) .dds-popover--sheet::backdrop,
.gdrfad-dds-embedded .dds-popover--sheet::backdrop {
  background: rgb(0 0 0 / 50%);
  background: var(--scrim, rgb(0 0 0 / 50%));
}

@media (max-width: 767px) /* scope-css: viewport (a sheet fixed to the screen) */ {
  :where(.gdrfad-dds) .dds-popover--sheet,
  .gdrfad-dds-embedded .dds-popover--sheet {
    inset: auto 0 0;
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: 85dvh;
    margin: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
  }
}