@use '../../global/scss/tools' as nsw;

.nsw-steps {
  counter-reset: step;

  @include nsw.component-spacing();

  &__item {
    position: relative;

    &:last-child {
      .nsw-steps__content {
        padding-bottom: 0;

        &::before {
          bottom: 0;
        }
      }
    }

    &::before {
      content: '';
      position: absolute;
      top: nsw.rem(1px);
      left: 0;
      width: nsw.rem(32px);
      height: nsw.rem(32px);
      border: nsw.rem(4px) solid var(--nsw-brand-accent);
      border-radius: 100%;

      @include nsw.breakpoint('lg') { 
        width: nsw.rem(48px);
        height: nsw.rem(48px);
        top: nsw.rem(-4px);
      }
    }

    &::after {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      top: nsw.rem(1px);
      left: 0;
      width: nsw.rem(32px);
      height: nsw.rem(32px);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--nsw-brand-accent);
      font-weight: var(--nsw-font-bold);
      visibility: hidden;
      
      @include nsw.font-size('md');

      @include nsw.breakpoint('lg') { 
        width: nsw.rem(48px);
        height: nsw.rem(48px);
        top: nsw.rem(-4px);
      }    
    }

    &--fill {
      &::before {
        background-color: var(--nsw-brand-accent);
      }
      
      &::after {
        color: var(--nsw-text-light);
      }

      .nsw-steps--dark & {
        &::before {
          background-color: var(--nsw-brand-dark);
        }   
      }

      .nsw-steps--light & {
        &::before {
          background-color: var(--nsw-brand-light);
        }
      }

      .nsw-steps--supplementary & {
        &::before {
          background-color: var(--nsw-brand-supplementary);
        }
      }
    }
  }

  &__content {
    position: relative;
    padding: 0 0 nsw.rem(24px) nsw.rem(48px);
    text-wrap: pretty;

    @include nsw.breakpoint('lg') { 
      padding: 0 0 nsw.rem(32px) nsw.rem(72px);
    }

    &::before {
      content: '';
      position: absolute;
      top: nsw.rem(33px);
      bottom: nsw.rem(-1px);
      left: nsw.rem(14px);
      width: nsw.rem(4px);
      background-color: var(--nsw-brand-accent);

      @include nsw.breakpoint('lg') { 
        top: nsw.rem(44px);
        left: nsw.rem(22px);
        bottom: nsw.rem(4px);
      }
    }
  }

  &--dark {
    .nsw-steps__item {
      &::before {
        border-color: var(--nsw-brand-dark);
      }

      &::after {
        color: var(--nsw-brand-dark);
      }

      &--fill {
        &::after {
          color: var(--nsw-text-light);
        }
      }
    }

    .nsw-steps__content {
      &::before {
        background-color: var(--nsw-brand-dark);
      }
    }
  }

  &--light {
    .nsw-steps__item {
      &::before {
        border-color: var(--nsw-brand-light);
      }
      
      &::after {
        color: var(--nsw-brand-light);
      }
      
      &--fill {
        &::after {
          color: var(--nsw-text-dark);
        }
      }
    }

    .nsw-steps__content {
      &::before {
        background-color: var(--nsw-brand-light);
      }
    }
  }

  &--supplementary {
    .nsw-steps__item {
      &::before {
        border-color: var(--nsw-brand-supplementary);
      }

      &::after {
        color: var(--nsw-brand-supplementary);
      }

      &--fill {
        &::after {
          color: var(--nsw-text-light);
        }
      }
    }

    .nsw-steps__content {
      &::before {
        background-color: var(--nsw-brand-supplementary);
      }
    }
  }

  &--counters {
    .nsw-steps__item {
      &::after {
        visibility: visible;
      }
    }
  }

  &--fill {
    .nsw-steps__item {
      &::before {
        background-color: var(--nsw-brand-accent);
      }
      
      &::after {
        color: var(--nsw-text-light);
      }
    }

    &.nsw-steps--dark {
      .nsw-steps__item {
        &::before {
          background-color: var(--nsw-brand-dark);
        }
      }      
    }

    &.nsw-steps--light {
      .nsw-steps__item {
        &::before {
          background-color: var(--nsw-brand-light);
        }
      
        &::after {
          color: var(--nsw-text-dark);
        }
      }      
    }

    &.nsw-steps--supplementary {
      .nsw-steps__item {
        &::before {
          background-color: var(--nsw-brand-supplementary);
        }
      }      
    }
  }

  &--medium {
    .nsw-steps__item {
      &::before {
        top: nsw.rem(-2px);

        @include nsw.breakpoint('lg') { 
          width: nsw.rem(40px);
          height: nsw.rem(40px);
          top: nsw.rem(-4px);
        }
      }

      &::after {
        top: nsw.rem(-2px);

        @include nsw.breakpoint('lg') { 
          font-size: var(--nsw-font-size-md-mobile);
          width: nsw.rem(40px);
          height: nsw.rem(40px);
          top: nsw.rem(-4px);
        }    
      }
    }

    .nsw-steps__content {
      @include nsw.breakpoint('lg') { 
        padding-left: nsw.rem(64px);
      }

      &::before {
        top: nsw.rem(30px);
        bottom: nsw.rem(2px);

        @include nsw.breakpoint('lg') { 
          top: nsw.rem(36px);
          bottom: nsw.rem(4px);
          left: nsw.rem(18px);
        }
      }
    }
  }

  &--small {
    .nsw-steps__item {
      &::before {
        top: nsw.rem(-4px);

        @include nsw.breakpoint('lg') { 
          width: nsw.rem(32px);
          height: nsw.rem(32px);
          top: nsw.rem(-2px);
        }
      }

      &::after {
        top: nsw.rem(-4px);

        @include nsw.breakpoint('lg') { 
          font-size: var(--nsw-font-size-md-mobile);
          width: nsw.rem(32px);
          height: nsw.rem(32px);
          top: nsw.rem(-2px);
        }    
      }
    }

    .nsw-steps__content {
      @include nsw.breakpoint('lg') { 
        padding-left: nsw.rem(56px);
      }

      &::before {
        top: nsw.rem(28px);
        bottom: nsw.rem(4px);

        @include nsw.breakpoint('lg') { 
          top: nsw.rem(30px);
          bottom: nsw.rem(2px);
          left: nsw.rem(14px);
        }
      }
    }
  }
}