/* NAVIGATION */
.h5p-theme .h5p-navigation {
  display: grid;
  grid-gap: var(--h5p-theme-spacing-l);
  grid-template-columns: min-content 1fr min-content;
  align-items: center;
  justify-items: center;
  container-type: inline-size;
  container-name: h5p-navigation;
  overflow: hidden;
  padding: var(--h5p-theme-spacing-m);
  max-width: 100%;
  /* Min height is the height of a secondary button */
  min-height: calc(var(--h5p-theme-spacing-xs)*2 + 1.5em + 3px*2);
  background-color: var(--h5p-theme-ui-base);
  border-top: 1px solid var(--h5p-theme-stroke-1);
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.05);
}

.h5p-theme .h5p-navigation.h5p-navigation--3-split {
  grid-template-columns: min-content 1fr min-content;
}
.h5p-theme .h5p-navigation.h5p-navigation--3-split .h5p-theme-previous {
  grid-column: 1;
}
.h5p-theme .h5p-navigation.h5p-navigation--3-split .h5p-theme-progress {
  grid-column: 2;
}
.h5p-theme .h5p-navigation.h5p-navigation--3-split .h5p-theme-next {
  grid-column: 3;
}

.h5p-theme .h5p-navigation.h5p-navigation--2-split-spread {
  grid-template-columns: 1fr 1fr;
}

.h5p-theme .h5p-navigation.h5p-navigation--2-split-next {
  grid-template-columns: 1fr min-content;
}

.h5p-navigation .h5p-theme-primary-cta {
  padding: var(--h5p-theme-spacing-xs) var(--h5p-theme-spacing-l);
  min-width: max-content;
}

.h5p-navigation .h5p-theme-primary-cta:hover {
  padding: var(--h5p-theme-spacing-xs) calc(var(--h5p-theme-spacing-l) - 0.75em);
}

.h5p-navigation .h5p-visibility-hidden {
  visibility: hidden;
}

.h5p-navigation .h5p-hidden {
  display: none;
}

/* We do not want the next button to take up space if we're showing the last/finish/submit button */
.h5p-navigation .h5p-theme-next.h5p-visibility-hidden:has(+ .h5p-theme-submit:not(.h5p-visibility-hidden)) {
  display: none;
}
.h5p-navigation .h5p-theme-next + .h5p-theme-submit.h5p-visibility-hidden {
  display: none;
}