/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --wizard-stepper-width: defines how much space the stepper should take up
   * @prop --wizard-header-height: defines how much space the header should take up
   * @prop --wizard-footer-height: defines how much space the footer should take up
  */
  --wizard-stepper-width: 100%;
  --wizard-header-height: 66px;
  --wizard-footer-height: 68px;
}

.wizard {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.wizard .wizard-header {
  width: 100%;
  height: var(--wizard-header-height);
  padding: var(--kv-spacing-2x, 8px);
  box-sizing: border-box;
}
.wizard .wizard-content {
  width: 100%;
  height: calc(100% - var(--wizard-footer-height));
}
.wizard .wizard-content.has-header {
  height: calc(100% - var(--wizard-footer-height) - var(--wizard-header-height));
}
.wizard .wizard-footer {
  width: 100%;
  height: var(--wizard-footer-height);
  display: flex;
  align-items: flex-end;
}
.wizard .wizard-footer kv-wizard-footer {
  --stepper-width: var(--wizard-stepper-width);
  width: 100%;
}