/* Print settings — auto-loaded for the print-settings snippet
   (site/snippets/search/print-settings.php). Figma "Sort By - Index MT"
   310:10686: a panel a shade darker than the column, sliding up from the
   foot of the Saved list over its lower part. The heading with ×, then per
   group a heading row (regular rule) over circle rows (thin rules), the
   disabled Drucken at the foot. */

/* Laid over the Saved list's sticky foot, from the column's bottom edge up;
   it clips the panel while it slides, so the column never scrolls to it. */
.print-settings {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3; /* above the rows and the column heading */
  overflow: clip;
}

.print-settings__panel {
  --color-bg: var(--color-panel); /* the column heading follows */
  --fa-serif: 0;
  max-height: calc(100vh - var(--menubar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg);
  border-top: var(--border);
}

/* Slide up / down (Alpine x-transition). */
.print-settings--anim {
  transition: transform var(--slide-duration) var(--ease-panel);
}
.print-settings--off {
  transform: translateY(100%);
}
.print-settings--on {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .print-settings--anim {
    transition: none;
  }
}

.print-settings__close {
  flex: none;
  align-self: center;
  line-height: 0;
  color: var(--color-fg);
}
.print-settings__close .icon {
  width: var(--close-size);
  height: var(--close-size);
}
.print-settings__close:hover {
  color: var(--color-muted);
}

.print-settings__heading,
.print-settings__option {
  padding-inline: var(--space-s);
}
/* A group ends on the regular rule. */
.print-settings__option:last-child {
  border-bottom: var(--border);
}

/* Circle mark, as in the filter's circle options (filter/filter-option). */
.print-settings__mark {
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
  border: var(--border);
  border-radius: 50%;
}
.print-settings__option.is-selected .print-settings__mark {
  background: var(--color-fg);
}

.print-settings__foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-s) var(--space-m) var(--space-m);
}

/* Desktop only. */
@media (max-width: 60rem) {
  .print-settings {
    display: none;
  }
}