/* Vertical exercise layout */

.container-exercise.style-vbox {
  gap: var(--space-lg);
}

.container-exercise.style-vbox .exercise-title,
.container-exercise.style-vbox .container-exercise-instruction,
.container-exercise.style-vbox .container-interaction,
.container-exercise.style-vbox .interaction-history {
  width: 100%;
}

.container-exercise.style-vbox .container-exercise-instruction {
  margin: 0;
}

.container-exercise.style-vbox .container-interaction {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: stretch;
}

.container-exercise.style-vbox .container-interaction > * {
  width: 100%;
}

.container-exercise.style-vbox .container-interaction-element,
.container-exercise.style-vbox .svg-button,
.container-exercise.style-vbox .container-instruction-arrows {
  align-self: stretch;
}

.container-exercise.style-vbox .container-interaction .svg-button {
  margin-inline: auto;
}

.container-exercise.style-vbox .interaction-history {
  min-height: 80px;
  background: var(--color-interaction-background-alt);
  border: 1px dashed var(--color-interaction-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .container-exercise.style-vbox {
    gap: var(--space-md);
  }
}