@mixin divider {
  content: ' ';
  position: absolute;
  background-color: var(--tds-stepper-divider-line);
}

:host {
  position: relative;
  display: table-cell;

  [role='listitem'] {
    display: flex;
    justify-content: start;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    &.text-below {
      flex-direction: column;
    }

    &.lg {
      padding: 0 20px;
      font: var(--tds-detail-01);
      letter-spacing: var(--tds-detail-01-ls);

      .content-container {
        height: 30px;
        min-width: 30px;

        tds-icon {
          vertical-align: bottom;
        }

        .index-container {
          vertical-align: sub;
        }
      }

      &.vertical {
        &::after {
          @include divider;

          height: 36px;
          width: 1px;
          top: 40px;
          left: 36px;
        }
      }

      &.horizontal {
        &::after {
          @include divider;

          height: 1px;
          left: calc(50% + 24px);
          right: 0;
          top: 18px;
        }

        &::before {
          @include divider;

          height: 1px;
          right: calc(50% + 24px);
          left: 0;
          top: 18px;
        }

        &.text-aside {
          &:not(.hide-labels) {
            &::after {
              @include divider;

              height: 1px;
              top: 16px;
              width: 10px;
              left: auto;
              right: -10px;
            }

            &::before {
              @include divider;

              height: 1px;
              top: 16px;
              width: 10px;
              left: -10px;
              right: auto;
            }
          }
        }
      }
    }

    &.sm {
      padding: 0 20px;
      font: var(--tds-detail-05);
      letter-spacing: var(--tds-detail-05-ls);

      .index-container {
        vertical-align: -webkit-baseline-middle;
        vertical-align: -moz-middle-with-baseline;
      }

      .content-container {
        height: 24px;
        min-width: 24px;
      }

      .tds-step-icon {
        vertical-align: -webkit-baseline-middle;
        vertical-align: -moz-middle-with-baseline;
        margin-top: -2px;
      }

      &.vertical {
        &::after {
          @include divider;

          height: 20px;
          width: 1px;
          top: 34px;
          left: 32px;
        }

        &::before {
          @include divider;

          height: 20px;
          width: 1px;
          top: 34px;
          left: 32px;
        }
      }

      &.horizontal {
        &::after {
          @include divider;

          height: 1px;
          left: calc(50% + 16px + 8px);
          right: 0;
          top: 13px;
        }

        &::before {
          @include divider;

          height: 1px;
          left: 0;
          right: calc(50% + 24px);
          top: 13px;
        }

        &.text-aside {
          &:not(.hide-labels) {
            &::after {
              @include divider;

              height: 1px;
              top: 13px;
              width: 10px;
              left: auto;
              right: -10px;
            }

            &::before {
              @include divider;

              height: 1px;
              top: 13px;
              width: 10px;
              left: -10px;
              right: auto;
            }
          }
        }
      }
    }

    .content-container {
      border-radius: 100px;
      border: 1px solid var(--tds-stepper-icon-background);
      text-align: center;
      position: relative;

      &.error {
        border-color: var(--tds-stepper-icon-step-border-color-warning);
        color: var(--tds-stepper-icon-step-border-color-warning);
      }

      &.success {
        background-color: var(--tds-stepper-icon-step-border-color-success);
        border-color: var(--tds-stepper-icon-step-border-color-success);
        color: var(--tds-white);
      }

      &.current {
        background-color: var(--tds-stepper-background);
        color: var(--tds-stepper-color);
      }

      &.upcoming {
        background-color: transparent;
        border-color: var(--tds-stepper-label-border-color-upcoming);
        color: var(--tds-stepper-label-text-color-upcoming);
      }
    }

    .label {
      text-align: center;

      &.lg {
        font: var(--tds-detail-01);
        letter-spacing: var(--tds-detail-01-ls);
      }

      &.sm {
        font: var(--tds-detail-05);
        letter-spacing: var(--tds-detail-05-ls);
      }

      &.upcoming {
        color: var(--tds-stepper-label-text-color-upcoming);
        opacity: var(--tds-stepper-label-text-opacity-upcoming);
      }
    }
  }
}

:host(:last-of-type) {
  [role='listitem'].horizontal {
    padding-right: 0;
  }

  [role='listitem'] {
    &.sm,
    &.lg {
      &::after {
        display: none;
      }
    }
  }

  [role='listitem'] {
    &.sm {
      &.vertical {
        &::before {
          display: none;
        }
      }
    }
  }
}

:host(:first-of-type) {
  [role='listitem'] {
    &.horizontal {
      padding-left: 0;
    }

    &.sm,
    &.lg {
      &::before {
        display: none;
      }
    }
  }
}