@import url('./style.css');

/* Enable adaptable font-size */
html.h5p-iframe .h5p-content {
  font-size: var(--size-step-0);
}

/* Custom styling for prev / next buttons*/
.h5p-question .h5p-question-prev, 
.h5p-question .h5p-question-next {
  padding: var(--space-3xs) var(--space-m) var(--space-3xs) var(--space-s);
}

.h5p-question .h5p-question-prev {
  margin-right: var(--space-m);
}

.h5p-question .h5p-question-prev:before,
.h5p-question .h5p-question-next:before {
  top: 1px;
}

/* Custom style for progress dots */
.progress-dot {
  &.current {
    background-color: var(--color-secondary);
  }
  &.answered {
    background-color: var(--color-button-bg);
  }
}

.progress-dot:before {
  display: none;
}

/* Allow space for focus offset */
.h5p-no-frame .questionset .h5p-question > * {
  margin-left: 1rem;
  margin-right: 1rem;
}

.h5p-content.h5p-no-frame {
  border: 1px solid #EEE;
}

/* Always show expanded image */
.h5p-question-image .h5p-question-image-wrap {
  transform: translate(0, 0);
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.h5p-question-image-scalable {
  cursor: default;
}

.h5p-question-image-fill-width .h5p-question-image-scalable:before,
.h5p-question-image-scalable:before {
  display: none;
}

/* Buttons */
.h5p-joubelui-button {
    padding: calc(var(--gutter)*.25) calc(var(--gutter)*.5);
    background: var(--color-button-bg);
    color: var(--color-button-text);;
    text-decoration: none;
    border-radius: var(--border-radius--pill,100vh);
    border:2px solid transparent;
    font-weight: bold;
    display: flex;
    gap: calc(var(--gutter)*.25);
    max-width: max-content;
    justify-content: center;
    align-items: center;
    transition: background .15s ease-in-out, outline-offset .25s ease-in, transform .15s linear;
}

.h5p-joubelui-button:focus-visible,
.h5p-joubelui-button:hover{
    transform: scale(1.05);
    background-color: var(--color-hover);
    color:#fff;
}

.h5p-joubelui-button:active{
    transform: scale(0.98);
}

.button-container {
  display: flex;
}

/* Misc */
.h5p-tooltip {
  display: none;
}

.h5p-multichoice .h5p-answer[aria-checked="true"] .h5p-alternative-container {
  border: 0;
}

.h5p-multichoice .h5p-answer {
    list-style: none;
    margin: var(--space-s) 0 var(--space-m);
}

.h5p-multichoice .h5p-question-plus-one, 
.h5p-multichoice .h5p-question-minus-one {
  display: none;
}

.h5p-question-buttons {
  width: 100%;
  display: flex;
}

.questionset-results .buttons {
  display: flex;
}