@ozen-ui/kit/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.css

React component library

.StepperVerticalStep {
  --stepper-vertical-indicator-icon-size: 24px;
  --stepper-vertical-indicator-icon-inset-top: var(--spacing-xs);
  --stepper-vertical-indicator-color-non-current: transparent;
  --stepper-vertical-indicator-color-current: transparent;
  --stepper-vertical-indicator-color: var(--stepper-vertical-indicator-color-non-current);
  --stepper-vertical-indicator-text-color-non-current: transparent;
  --stepper-vertical-indicator-text-color-current: transparent;
  --stepper-vertical-indicator-text-color: var(--stepper-vertical-indicator-text-color-non-current);
  box-sizing: border-box;
}

  .StepperVerticalStep-Indicator {
    box-sizing: border-box;
    margin-block-start: var(--stepper-vertical-indicator-icon-inset-top);
  }

  .StepperVerticalStep-Info {
    box-sizing: border-box;
  }

  .StepperVerticalStep-SubcontentInner {
    margin-block-start: var(--spacing-2xs);
  }

  .StepperVerticalStep-Action {
    margin-block-start: var(--spacing-2xs);
  }

  .StepperVerticalStep-Description {
    padding-block: var(--spacing-xs);
  }

  .StepperVerticalStep-Description_custom {
    flex: 1;
  }

  .StepperVerticalStep-Substeps .Collapse-Inner {
      display: flex;
      flex-direction: column;
    }

  .StepperVerticalStep_variant_default {
    --stepper-vertical-indicator-color-non-current: var(--color-background-action-light);
    --stepper-vertical-indicator-color-current: var(--color-background-action);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-action-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_refusal {
    --stepper-vertical-indicator-color-non-current: var(--color-background-error-light);
    --stepper-vertical-indicator-color-current: var(--color-background-error);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-error-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_blocked {
    --stepper-vertical-indicator-color-non-current: var(--color-background-error-light);
    --stepper-vertical-indicator-color-current: var(--color-background-error);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-error-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_warning {
    --stepper-vertical-indicator-color-non-current: var(--color-background-warning-light);
    --stepper-vertical-indicator-color-current: var(--color-background-warning);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-warning-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_awaiting {
    --stepper-vertical-indicator-color-non-current: var(--color-background-info-light);
    --stepper-vertical-indicator-color-current: var(--color-background-info);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-info-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_inProcessing {
    --stepper-vertical-indicator-color-non-current: var(--color-background-action-secondary-light);
    --stepper-vertical-indicator-color-current: var(--color-background-accent-action-secondary-light);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-action-secondary-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_success {
    --stepper-vertical-indicator-color-non-current: var(--color-background-success-light);
    --stepper-vertical-indicator-color-current: var(--color-background-success);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-success-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_variant_action {
    --stepper-vertical-indicator-color-non-current: var(--color-background-action-light);
    --stepper-vertical-indicator-color-current: var(--color-background-action);
    --stepper-vertical-indicator-text-color-non-current: var(--color-content-action-dark);
    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
  }

  .StepperVerticalStep_current {
    --stepper-vertical-indicator-color: var(--stepper-vertical-indicator-color-current);
    --stepper-vertical-indicator-text-color: var(--stepper-vertical-indicator-text-color-current);
  }

  .StepperVerticalStep_ellipsis .StepperVerticalStep-Description {
      overflow: hidden;
    }

  .StepperVerticalStep_ellipsis .StepperVerticalStep-Label, .StepperVerticalStep_ellipsis .StepperVerticalStep-Caption, .StepperVerticalStep_ellipsis .StepperVerticalStep-Hint, .StepperVerticalStep_ellipsis .StepperVerticalStep-Action {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  .StepperVerticalStep-Path {
    position: relative;
  }

  .StepperVerticalStep-Path::before {
    content: '';
    box-sizing: border-box;
    display: block;
    block-size: var(--stepper-vertical-indicator-icon-inset-top);
    inline-size: 2px;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate(-50%, 0);
    background-color: var(--color-background-secondary);
    border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
    transition: var(--transition-default);
    transition-property: block-size, clip-path;
    clip-path: inset(100% 0 0 0);
  }

  .StepperVerticalStep-Path::after {
    --stepper-vertical-indicator-icon-stroke-gap: 1px;
    --stepper-vertical-indicator-inset-top: calc(var(--stepper-vertical-indicator-icon-size) + var(--stepper-vertical-indicator-icon-inset-top) + var(--stepper-vertical-indicator-icon-stroke-gap));
    content: '';
    box-sizing: border-box;
    display: block;
    block-size: 0;
    inline-size: 2px;
    position: absolute;
    inset-block-start: var(--stepper-vertical-indicator-inset-top);
    inset-inline-start: 50%;
    transform: translate(-50%, 0);
    background-color: var(--color-background-secondary);
    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
    transition: var(--transition-default) block-size;
  }

  .StepperVerticalStep_hasPrevious .StepperVerticalStep-Path::before {
      clip-path: inset(0% 0 0 0);
    }

  .StepperVerticalStep_hasNext .StepperVerticalStep-Path::after {
      block-size: calc(100% - var(--stepper-vertical-indicator-inset-top) + 1px);
    }