@import "./properties.css";

.steps {
  border-radius: var(--steps-border-radius);
  border: var(--steps-border);
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  width: 100%;
}

.step {
  align-items: center;
  display: flex;
  flex: 1;
  font-size: var(--steps-item-font-size);
  font-weight: var(--steps-item-font-weight);
  justify-content: center;
  padding: var(--steps-item-padding);
  position: relative;
  text-align: var(--steps-item-text-align);
  text-transform: var(--steps-item-text-transform);
}

.step:not(:first-of-type):before,
.step:not(:last-of-type):after {
  border: 1px solid transparent;
  content: "";
  display: block;
  height: var(--steps-item-arrow-height);
  position: absolute;
  top: var(--steps-item-arrow-top);
  transform: var(--steps-item-arrow-transform);
  width: var(--steps-item-arrow-width);
}

.step:not(:last-of-type):after {
  border-right-color: var(--steps-item-arrow-left-border);
  border-top-color: var(--steps-item-arrow-left-border);
  right: var(--steps-item-arrow-right);
}

.step:not(:first-of-type):before {
  border-right-color: var(--steps-item-arrow-right-border);
  border-top-color: var(--steps-item-arrow-right-border);
  left: var(--steps-item-arrow-left);
}

.indicator {
  align-items: center;
  display: flex;
  font-size: var(--steps-item-indicator-font-size);
  font-weight: var(--steps-item-indicator-font-weight);
  height: var(--steps-item-indicator-size);
  justify-content: center;
  line-height: var(--steps-item-indicator-line-height);
  margin-right: var(--steps-item-indicator-margin-right);
  width: var(--steps-item-indicator-size);
}

.number:after {
  content: ".";
}

.error svg {
  color: var(--steps-item-indicator-error-color);
}

.current,
.success svg {
  color: var(--steps-item-indicator-color);
}