<commit_before>.onboarding {
  background-color: $purple;
  color: #fff;
}
<commit_msg>Initial styles for onboarding.<commit_after>.onboarding {
  background-color: $purple;
  color: #fff;
  position: relative;

  > .wrapper {
    padding: $base-spacing 0 $section-spacing;
  }
}

// @TODO: maybe this close button should be a pattern
// since it is used in the modal and this onboarding component?
.onboarding__close-button {
  background-color: transparent;
  border: 0 none;
  color: $med-gray;
  display: block;
  font-size: 42px;
  line-height: 1;
  position: absolute;
  right: $base-spacing;
  top: 0;

  &:hover {
    cursor: pointer;
  }
}

.slideshow {
  //
}

.slideshow__slide {
  .heading {
    &.-beta {
      color: #fff;
      font-size: $font-medium;
      font-weight: 600;
    }
  }

  p + .heading {
    margin-top: $section-spacing;
  }
}

.slideshow__controller {
  display: table;
  margin: 0 auto;
  min-height: 41px;
  padding: 0 ($base-spacing / 2);
  position: relative;

  > ul {
    overflow: hidden;

    > li {
      float: left;
      padding: 0 5px;
    }
  }


  > button {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    cursor: pointer;
    font-size: $font-regular;
    padding: 8px 20px;
    position: absolute;
    top: 0;
  }

  .button--prev {
    right: 100%;
  }

  .button--next {
    left: 100%
  }
}

{'fraction_non_alphanumeric': 0.13603473227206947, 'fraction_numerical': 0.019536903039073805, 'mean_word_length': 2.4575, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7152531', 'n_tokens_mistral': 543, 'n_tokens_neox': 496, 'n_words': 126}