.d-stepper-desktop {
  /* Icon container */
  --#{$prefix}step-icon-container-color: var(--#{$prefix}gray-400);
  --#{$prefix}step-icon-container-background-color: transparent;
  --#{$prefix}step-icon-container-size: var(--#{$prefix}ref-spacer-9);
  --#{$prefix}step-icon-container-font-size: var(--#{$prefix}ref-spacer-4);
  --#{$prefix}step-icon-container-border-width: 2px;
  --#{$prefix}step-icon-container-border-color: var(--#{$prefix}gray-200);
  --#{$prefix}step-icon-container-border-radius: 100%;
  --#{$prefix}step-icon-container-z-index: 1;

  /* Base step */
  --#{$prefix}step-icon-size: var(--#{$prefix}ref-spacer-6);
  --#{$prefix}step-gap: var(--#{$prefix}ref-spacer-2);
  --#{$prefix}step-z-index: 0;

  /* Checked step */
  --#{$prefix}step-check-background-color: var(--#{$prefix}success);
  --#{$prefix}step-check-border-color: var(--#{$prefix}success);

  /* Current step */
  --#{$prefix}step-current-text-color: var(--#{$prefix}step-icon-container-color);
  --#{$prefix}step-current-background-color: transparent;

  /* Step line */
  --#{$prefix}step-line-stroke: 2px;
  --#{$prefix}step-line-color: var(--#{$prefix}gray-200);

  /* Step label */
  --#{$prefix}step-label-padding: var(--#{$prefix}ref-spacer-4);
  --#{$prefix}step-vertical-label-padding: var(--#{$prefix}ref-spacer-4);
  --#{$prefix}step-label-font-size: var(--#{$prefix}body-font-size);
  --#{$prefix}step-description-font-size: var(--#{$prefix}fs-body-tiny);

  position: relative;
  display: flex;

  .d-step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--#{$prefix}step-gap);

    &:last-child {
      &::after {
        content: none;
      }
    }

    &::after {
      position: absolute;
      top: 16px;
      left: calc(50% + var(--bs-step-icon-container-size));
      z-index: 1;
      width: calc(100% - var(--bs-step-icon-container-size) * 2);
      height: var(--#{$prefix}step-icon-container-border-width);
      content: "";
      background: var(--#{$prefix}gray-100);
      border-radius: 10px;
    }

    .d-step-value {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .d-step-icon-container {
      position: relative;
      z-index: var(--#{$prefix}step-icon-container-z-index);
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--#{$prefix}step-icon-container-size);
      height: var(--#{$prefix}step-icon-container-size);
      font-size: var(--#{$prefix}step-icon-container-font-size);
      line-height: var(--#{$prefix}step-icon-container-font-size);
      color: var(--#{$prefix}step-icon-container-color);
      background-color: var(--#{$prefix}step-icon-container-background-color);
      border: var(--#{$prefix}step-icon-container-border-width) solid var(--#{$prefix}step-icon-container-border-color);
      border-radius: var(--#{$prefix}step-icon-container-border-radius);
    }

    .d-step-check {
      .d-step-icon {
        --#{$prefix}icon-color: var(--#{$prefix}white);
        --#{$prefix}icon-component-size: .25rem;
        --#{$prefix}icon-size: 1rem;
        --#{$prefix}icon-component-padding: calc(var(--#{$prefix}icon-component-size, 24px) * .4);
        --#{$prefix}icon-component-bg-color: var(--#{$prefix}step-check-background-color);
        border-radius: 2rem;
      }
    }

    &.d-step-current {
      --#{$prefix}step-icon-container-color: var(--#{$prefix}primary-500);
      --#{$prefix}step-icon-container-border-color: var(--#{$prefix}primary-500);
      .d-step-icon-container {
        font-weight: 500;
      }
    }


    .d-step-text-container {
      padding-right: var(--#{$prefix}step-label-padding);
      padding-left: var(--#{$prefix}step-label-padding);
      text-align: center;

      .d-step-label {
        font-size: var(--#{$prefix}step-label-font-size);
      }

      .d-step-description {
        font-size: var(--#{$prefix}step-description-font-size);
        color: var(--#{$prefix}gray-400);
      }
    }
  }

  .d-step-current {
    .d-step-label {
      --font-weight-active-text: 500;
      font-weight: var(--font-weight-active-text);
    }
  }

  &.is-align-start {
    .d-step-text-container {
      text-align: left;
      transform: translateX(calc(50% - (var(--#{$prefix}step-icon-container-size) / 2) - var(--#{$prefix}step-label-padding)));
    }
  }

  &.is-vertical {
    flex-direction: column;
    gap: var(--#{$prefix}step-gap);

    .d-step {
      flex-direction: row;
      align-items: start;

      .d-step-value {
        align-items: start;
      }

      .d-step-text-container {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        align-items: flex-start;
        padding-inline: var(--#{$prefix}step-vertical-label-padding);
      }

      .d-step-label {
        text-align: left;
      }

      &::after {
        top: calc(var(--bs-step-icon-container-size) + 4px);
        left: 16px;
        width: var(--#{$prefix}step-icon-container-border-width);
        height: calc(100% - var(--bs-step-icon-container-size));
      }
    }
  }

  .d-step-icon {
    --#{$prefix}icon-size: var(--#{$prefix}step-icon-size);
    position: absolute;
    right: -10px;
    bottom: -4px;
    display: flex;
    font-size: inherit;
  }
}