@import url('../CloudTheme.css');

.zStepper {
  :global(.MuiStepContent-root),
  :global(.MuiStepConnector-line) {
    border-color: $stroke-stroke1;
  }

  :global(.Mui-active),
  :global(.Mui-completed) {
    :global(.MuiStepContent-root),
    :global(.MuiStepConnector-line) {
      border-color: $blue-blue1;
    }
  }

  :global(.MuiStepLabel-root) {
    :global(.MuiStepLabel-label) {
      &:global(.Mui-disabled),
      &:global(.Mui-active),
      &:global(.Mui-completed) {
        font-weight: 500;
      }
    }
  }

  :global(.MuiStepLabel-iconContainer) {
    padding-right: 4px;
  }

  .stepIcon {
    width: 22px;
    height: 22px;
    color: $stroke-stroke1;

    circle {
      r: 10.5;
    }

    text {
      fill: $black-black1;
    }
  }

  svg.arrowConnector {
    color: $black-black3;
  }
}