/*
 * Structural styles for ui-wizard and its parts.
 * The step-visibility selectors handle paginate-mode wizards by matching
 * the parent's `step` attribute to a child's nth-of-type position.
 */

ui-wizard {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;          /* allow children to set up their own scroll regions */
}
ui-wizard[type="paginate"]>ui-wizard-step {
  display: none;
  flex: 1;
  min-height: 0;
  opacity: 0;
  transition: opacity 500ms linear;
}
ui-wizard[step=""]>ui-wizard-backbutton,
ui-wizard[step="1"]>ui-wizard-backbutton {
  display: none;
}
/* Up to 10 steps; wizards with more should be split. */
ui-wizard[type="paginate"][step=""]>ui-wizard-step:nth-of-type(1),
ui-wizard[type="paginate"][step="1"]>ui-wizard-step:nth-of-type(1),
ui-wizard[type="paginate"][step="2"]>ui-wizard-step:nth-of-type(2),
ui-wizard[type="paginate"][step="3"]>ui-wizard-step:nth-of-type(3),
ui-wizard[type="paginate"][step="4"]>ui-wizard-step:nth-of-type(4),
ui-wizard[type="paginate"][step="5"]>ui-wizard-step:nth-of-type(5),
ui-wizard[type="paginate"][step="6"]>ui-wizard-step:nth-of-type(6),
ui-wizard[type="paginate"][step="7"]>ui-wizard-step:nth-of-type(7),
ui-wizard[type="paginate"][step="8"]>ui-wizard-step:nth-of-type(8),
ui-wizard[type="paginate"][step="9"]>ui-wizard-step:nth-of-type(9),
ui-wizard[type="paginate"][step="10"]>ui-wizard-step:nth-of-type(10) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  opacity: 1;
}
ui-wizard-step>section {
  padding: 0 .5em;
}
ui-wizard[type="paginate"] ui-wizard-pagination {
  display: grid;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-items: center;
}
ui-wizard[type="paginate"] ui-wizard-pagination ui-button.back {
  grid-column-start: 1;
}
ui-wizard[type="paginate"] ui-wizard-pagination ui-button.next {
  grid-column-start: 2;
}
ui-wizard-navigation {
  display: flex;
  flex-direction: row;
}
ui-wizard-navigation ui-buttonbar {
  width: 100%;
}