@import "../colors.css";
@import "../spacing.css";
@import "../typography.css";

:root {
  --steps-background-color: var(--color-squanchy-gray-20);
  --steps-border: 1px solid var(--color-squanchy-gray-20);
  --steps-border-radius: 3px;

  --steps-item-font-size: 14px;
  --steps-item-font-weight: var(--body-text-weight);
  --steps-item-padding: var(--spacing-tiny);
  --steps-item-text-align: center;
  --steps-item-text-transform: uppercase;

  --steps-item-indicator-color: var(--color-picklerick-green-100);
  --steps-item-indicator-error-color: var(--color-beth-pink-100);
  --steps-item-indicator-font-size: 14px;
  --steps-item-indicator-font-weight: var(--body-text-weight);
  --steps-item-indicator-line-height: 20px;
  --steps-item-indicator-margin-right: var(--spacing-tiny);
  --steps-item-indicator-size: 20px;

  --steps-item-arrow-height: 100%;
  --steps-item-arrow-left: -36px;
  --steps-item-arrow-left-border: var(--color-white);
  --steps-item-arrow-right: 0;
  --steps-item-arrow-right-border: var(--color-squanchy-gray-20);
  --steps-item-arrow-top: 0;
  --steps-item-arrow-transform: rotate(45deg);
  --steps-item-arrow-width: 35px;
}