@import '@legends/styles/base';

.stepper {
  display: flex;
  flex-direction: column;
  counter-reset: stepper;
  gap: 0.5rem;
  border: 0.125rem solid $primaryBorder;
  background-color: $primaryBackground;
  padding: 1rem;
  border-radius: 0.625rem;
}

.stepperItem {
  display: grid;
  grid-template-rows: [text-row] auto [line-row] 1.25rem;
  grid-template-columns: [counter-column] 1.75rem [text-column] auto;
  column-gap: 1rem;
  row-gap: 0.5rem;
  position: relative;

  &.complete {
    .stepperCounter {
      background-color: $accent;
      color: $alternativeText;
      position: relative;

      &:after {
        position: absolute;
        content: '';
        display: block;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background-color: $secondaryBackground;
        right: -0.375rem;
        bottom: -0.375rem;
        color: $accent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E");
        background-size: 0.75rem;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }

  &.active {
    .stepperLabel {
      color: $primaryText;
    }
  }

  &:last-child {
    grid-template-rows: [text-row] auto;
  }
}

.stepperLine {
  display: block;
  width: 0.125rem;
  background-color: $secondaryBorder;
  height: 100%;
  justify-self: center;

  .stepperItem:last-child & {
    display: none;
  }
}

.stepperCounter {
  flex-shrink: 0;
  counter-increment: stepper;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background-color: $tertiaryBackground;
  color: $primaryText;
  border: 1px solid $primaryBorder;
  border-radius: 50%;
  line-height: 1;

  &:before {
    content: counter(stepper);
  }
}

.stepperLabel {
  color: $secondaryText;
  position: relative;
  padding-top: calc((1.75rem - 1.5em) / 2);
  font-weight: 400;
  border-bottom: 0.125rem solid transparent;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
