@import './global/variables.scss';

.numbered-steps {
  // using child selector so nested <li> within this component do not inherit its styles
  > li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 30px;

    &::before {
      position: absolute;
      left: 0;
      display: block;
      width: 30px;
      height: 30px;
      font-size: 13px;
      line-height: 30px;
      text-align: center;
      background-color: $white;
      border: 1px solid $slate-20;
      border-radius: 50%;
    }

    &:nth-child(1)::before {
      content: '1';
    }

    &:nth-child(2)::before {
      content: '2';
    }

    &:nth-child(3)::before {
      content: '3';
    }

    &:nth-child(4)::before {
      content: '4';
    }

    &:nth-child(5)::before {
      content: '5';
    }

    &:nth-child(6)::before {
      content: '6';
    }

    &:nth-child(7)::before {
      content: '7';
    }

    &:nth-child(8)::before {
      content: '8';
    }

    &:nth-child(9)::before {
      content: '9';
    }
  }

  h3 {
    margin-bottom: 6px;
  }

  p {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 18px;
  }
}