<commit_before>main[data-pathname^="/onboarding"]
  padding-bottom: rem(80)

@media(min-width: #{$break-2})
  main[data-pathname^="/onboarding"]
    margin-top: rem(120)
    padding-bottom: 0

// -------------------------------------

.PeoplePicker > .Button
  display: block
  width: 95%
  max-width: 640px
  margin: 0 auto

.PeoplePicker.isFollowingAll > .Button
  background-color: black
  border-color: black
  color: white
  .no-touch &:hover
    background-color: #666
    border-color: #666
    color: white
    > .SVGIcon g
      stroke: white

// .PeoplePicker.isFollowingAll > .Button > span + span display: inline

// These are eventually going to be links But we'll never want them to appear
// as links within the flow of on-boarding
.PeoplePicker .PersonGrid .stats dd
  border-bottom: none
  pointer-events: none

@media(min-width: #{$break-2})
  .PeoplePicker
    padding-top: rem(20)
  .CommunityPicker .StreamComponent,
  .PeoplePicker .StreamComponent
    padding: 0 rem(20) rem(20)
  .PeoplePicker > .Button
    width: 100%

@media(min-width: #{$break-4})
  .CommunityPicker .StreamComponent,
  .PeoplePicker .StreamComponent
    padding: 0 rem(40) rem(40)

// -------------------------------------
.CoverPicker > .Uploader
  position: fixed
  top: rem(120)
  left: 0
  right: 0
  z-index: 0
  text-align: center
  color: white
  // padding-bottom: 56.25%

// These styles should eventually be applied to Cover
.CoverPicker > .Uploader:before
  transition: background-color $speed ease
  content: ''
  position: fixed
  top: 0
  left: 0
  right: 0
  padding-bottom: 56.25%
  background-color: transparent
.CoverPicker > .hasDragOver.Uploader:before
  background-color: rgba(black, 0.5)
  z-index: -1

@media(min-width: #{$break-2})
  .CoverPicker > .Uploader
    top: rem(240)

// -------------------------------------

.AvatarPicker,
.InfoPicker
  height: calc(100vh - 80px)
  background-color: white

.AvatarPicker > .Avatar,
.InfoPicker > .Avatar
  +circle(rem(160))
  margin-bottom: rem(20)

.AvatarPicker > .Uploader
  position: relative
  padding: rem(10)
  color: #aaa
<commit_msg>Ensure the bar is locked to the bottom on mobile<commit_after>main[data-pathname^="/onboarding"]
  padding-bottom: rem(80)

@media(min-width: #{$break-2})
  main[data-pathname^="/onboarding"]
    margin-top: rem(120)
    padding-bottom: 0

// -------------------------------------

@media(max-width: #{$break-2-max})
  .CommunityPicker,
  .PeoplePicker,
  .AvatarPicker,
  .CoverPicker,
  .InfoPicker
    min-height: calc(100vh - 90px)

.PeoplePicker > .Button
  display: block
  width: 95%
  max-width: 640px
  margin: 0 auto

.PeoplePicker.isFollowingAll > .Button
  background-color: black
  border-color: black
  color: white
  .no-touch &:hover
    background-color: #666
    border-color: #666
    color: white
    > .SVGIcon g
      stroke: white

// .PeoplePicker.isFollowingAll > .Button > span + span display: inline

// These are eventually going to be links But we'll never want them to appear
// as links within the flow of on-boarding
.PeoplePicker .PersonGrid .stats dd
  border-bottom: none
  pointer-events: none

@media(min-width: #{$break-2})
  .PeoplePicker
    padding-top: rem(20)
  .CommunityPicker .StreamComponent,
  .PeoplePicker .StreamComponent
    padding: 0 rem(20) rem(20)
  .PeoplePicker > .Button
    width: 100%

@media(min-width: #{$break-4})
  .CommunityPicker .StreamComponent,
  .PeoplePicker .StreamComponent
    padding: 0 rem(40) rem(40)

// -------------------------------------
.CoverPicker > .Uploader
  position: fixed
  top: rem(120)
  left: 0
  right: 0
  z-index: 0
  text-align: center
  color: white
  // padding-bottom: 56.25%

// These styles should eventually be applied to Cover
.CoverPicker > .Uploader:before
  transition: background-color $speed ease
  content: ''
  position: fixed
  top: 0
  left: 0
  right: 0
  padding-bottom: 56.25%
  background-color: transparent
.CoverPicker > .hasDragOver.Uploader:before
  background-color: rgba(black, 0.5)
  z-index: -1

@media(min-width: #{$break-2})
  .CoverPicker > .Uploader
    top: rem(240)

// -------------------------------------

.AvatarPicker,
.InfoPicker
  height: calc(100vh - 80px)
  background-color: white

.AvatarPicker > .Avatar,
.InfoPicker > .Avatar
  +circle(rem(160))
  margin-bottom: rem(20)
  margin-left: rem(10)

.AvatarPicker > .Uploader
  position: relative
  padding: rem(10)
  color: #aaa

{'fraction_non_alphanumeric': 0.17182208173402574, 'fraction_numerical': 0.03431925942650711, 'mean_word_length': 2.713327745180218, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 29, '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': '1355556', 'n_tokens_mistral': 1592, 'n_tokens_neox': 1452, 'n_words': 387}