/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host {
  /**
   * @prop --progress-bar-height: The height of the progress bar.
   * @prop --progress-height: The overall height of the progress bar container.
   * @prop --progress-bar-background-color: The color of the progress bar container.
   * @prop --progress-bar-filler-success-color: The color of the progress bar filler.
   * @prop --progress-bar-filler-error-color: The color of the progress bar filler when in error.
   */
  --progress-bar-height: 2px;
  --progress-height: 14px;
  --progress-bar-background-color: var(--border-persistent-wizard-default);
  --progress-bar-filler-success-color: var(--border-persistent-wizard-selected);
  --progress-bar-filler-error-color: var(--color-red-500);
}

.step-progress-bar-container {
  display: flex;
  height: var(--progress-height);
  position: relative;
  align-items: center;
  justify-content: space-between;
}
.step-progress-bar-container .progress-bar {
  width: 100%;
  height: var(--progress-bar-height);
  border-radius: calc(var(--progress-bar-height) / 2);
  background-color: var(--progress-bar-background-color);
  padding: 0 calc(var(--progress-bar-height) / 2);
}
.step-progress-bar-container .progress-bar-filler {
  position: absolute;
  height: var(--progress-bar-height);
  background-color: var(--progress-bar-filler-success-color);
  border-radius: calc(var(--progress-bar-height) / 2);
}
.step-progress-bar-container .progress-bar-filler.error {
  background-color: var(--progress-bar-filler-error-color);
}
.step-progress-bar-container .steps-container {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}