:root {
  --ty-steps-icon-bg: var(--ty-color-bg-container);
  --ty-steps-color: var(--ty-color-text);
  --ty-steps-tail-color: #dcdcdc;
  --ty-steps-title-font-size: 16px;
  --ty-steps-title-font-weight-process: 600;
  --ty-steps-title-color: var(--ty-color-text-secondary);
  --ty-steps-desc-color: var(--ty-color-text-tertiary);
  --ty-steps-icon-size: 32px;
  --ty-steps-icon-border: var(--ty-color-primary);
  --ty-steps-process-color: var(--ty-color-primary);
  --ty-steps-process-color-contrast: #fff;
  --ty-steps-wait-color: var(--ty-color-text-quaternary);
  --ty-steps-error-color: var(--ty-color-danger);
}

[data-tiny-theme='dark'] {
  --ty-steps-icon-bg: #1f1f1f;
  --ty-steps-color: var(--ty-color-text);
  --ty-steps-tail-color: #424242;
  --ty-steps-title-font-size: 16px;
  --ty-steps-title-font-weight-process: 600;
  --ty-steps-title-color: var(--ty-color-text-secondary);
  --ty-steps-desc-color: var(--ty-color-text-tertiary);
  --ty-steps-icon-size: 32px;
  --ty-steps-icon-border: var(--ty-color-primary);
  --ty-steps-process-color: var(--ty-color-primary);
  --ty-steps-process-color-contrast: #fff;
  --ty-steps-wait-color: var(--ty-color-text-quaternary);
  --ty-steps-error-color: var(--ty-color-danger);
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-steps-icon-bg: #1f1f1f;
  --ty-steps-color: var(--ty-color-text);
  --ty-steps-tail-color: #424242;
  --ty-steps-title-font-size: 16px;
  --ty-steps-title-font-weight-process: 600;
  --ty-steps-title-color: var(--ty-color-text-secondary);
  --ty-steps-desc-color: var(--ty-color-text-tertiary);
  --ty-steps-icon-size: 32px;
  --ty-steps-icon-border: var(--ty-color-primary);
  --ty-steps-process-color: var(--ty-color-primary);
  --ty-steps-process-color-contrast: #fff;
  --ty-steps-wait-color: var(--ty-color-text-quaternary);
  --ty-steps-error-color: var(--ty-color-danger);
}
}