/*
 * Safari can keep :hover and :focus-within active on different <details>
 * elements. Visibility therefore follows one explicit JavaScript state only.
 */
html body #iblearnExerciseDraft #globalBreadcrumbs .ibl-crumb-menu > .ibl-crumb-options {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  contain: none !important;
}

html body #iblearnExerciseDraft #globalBreadcrumbs .ibl-crumb-menu[data-ibl-crumb-open="true"] > .ibl-crumb-options {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  contain: none !important;
}

/* Shrink-to-fit is more reliable than max-content in Safari for small absolute menus. */
html body #iblearnExerciseDraft #globalBreadcrumbs .ibl-crumb-menu:not([data-crumb-layout="wide"]) > .ibl-crumb-options {
  width: auto !important;
  min-width: 230px !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
}

@media (max-width: 700px) {
  html body #iblearnExerciseDraft #globalBreadcrumbs .ibl-crumb-menu:not([data-crumb-layout="wide"]) > .ibl-crumb-options {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}