<commit_before>@import ../../styles/lib

.FormControl
  position: relative

.FormControl.asBoxControl
  margin-bottom: rem(10)

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

.FormControlInput
  +sans-typeset
  transition: background-color $speed $ease, border-color $speed $ease, color $speed $ease, width $speed $ease, height $speed $ease
  display: inline-block
  vertical-align: baseline
  width: 100%
  min-height: rem(40)
  background-color: transparent
  border: 0
  border-bottom: 1px solid #aaa
  color: black
  &:focus
    border-color: black
    outline: 0
  &::placeholder
    color: #aaa

.FormControlInput.asBoxControl
  height: rem(60)
  padding: 0 rem(10)
  background-color: #d8d8d8
  border: 1px solid #d8d8d8
  color: black
.FormControlInput.asBoxControl:focus
  background-color: white
  border-color: white
.FormControlInput.asBoxControl.onWhite:focus
  background-color: #666
  border-color: #666
  color: white

.hasValue:not(.isInitialValue) > .FormControlInput
  border-color: black

.hasValue:not(.isInitialValue) > .FormControlInput.asBoxControl
  background-color: white
  border-color: white
.hasValue:not(.isInitialValue) > .FormControlInput.asBoxControl.onWhite
  background-color: #666
  border-color: #666
  color: white

.isFailing > .FormControlInput,
.isFailing > .FormControlInput.asBoxControl,
.isFailing > .FormControlInput.asBoxControl.onWhite
  border-color: $danger

textarea.FormControlInput:not(.asBoxControl)
  height: rem(30)
  min-height: 0
  margin-top: rem(10)

textarea.FormControlInput.asBoxControl
  height: rem(120)
  padding-top: rem(20)
  padding-bottom: rem(20)
  margin-bottom: rem(-5)

.hasValue > textarea.FormControlInput:not(.asBoxControl),
.hasFocus > textarea.FormControlInput:not(.asBoxControl)
  height: rem(115)

@media(min-width: #{$break-3})
  .hasValue > textarea.FormControlInput:not(.asBoxControl),
  .hasFocus > textarea.FormControlInput:not(.asBoxControl)
    height: rem(85)

.BatchEmailControl .FormControlInput.asBoxControl
  height: rem(160)

[data-pathname^="/onboarding"] .NameControl > .FormControlInput
  +sans-bold-family
  font-size: 1rem

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

.FormControlLabel
  +sans-typeset
  transition: transform $speed2 $ease, opacity $speed2 $ease, color $speed2 $ease
  display: inline-block
  vertical-align: baseline
  position: absolute
  bottom: rem(-15)
  right: 0
  opacity: 0
  color: #aaa

.FormControlLabel.asBoxControl
  font-size: rem(11)
  top: rem(20)
  bottom: auto
  left: rem(11)
  right: auto

.isFailing > .FormControlLabel,
.hasFocus.hasValue > .FormControlLabel
  transform: translate3d(0,rem(10),0)
  opacity: 1

.isFailing > .FormControlLabel.asBoxControl,
.hasFocus.hasValue > .FormControlLabel.asBoxControl
  transform: translate3d(0,rem(-17),0)

.isFailing > .FormControlLabel
  color: $danger !important

.hasExceeded.hasValue > .FormControlLabel
  color: $danger

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

.FormControlSuggestionList
  transition: height $speed $ease
  overflow: hidden
  height: 0
  margin: 0
.FormControlSuggestionList.hasSuggestions
  height: rem(75)

.FormControlSuggestionList > p
  margin: rem(5) 0 0

.FormControlSuggestionList > button
  +sans-typeset
  transition: color $speed
  margin-right: rem(10)
  border-bottom: 1px solid

.no-touch .FormControlSuggestionList > button:hover
  color: #aaa

.FormControlSuggestionList > button:last-of-type
  margin-right: 0

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

.FormControlStatus
  transition: opacity $speed2
  position: absolute
  top: rem(15)
  right: rem(10)
.FormControlStatus:empty
  opacity: 0

.FormControlStatus > .SVGIcon > g
  stroke-width: 2

.FormControlStatus > .RequestIcon > g
  fill: #aaa

.FormControlStatus > .SuccessIcon > g
  stroke-linejoin: bevel
  stroke: $success

.FormControlStatus > .FailureIcon > g
  stroke: $danger

[data-pathname^="/onboarding"] .FormControlStatus
  display: none

<commit_msg>Fixes the outline around requesting icons<commit_after>@import ../../styles/lib

.FormControl
  position: relative

.FormControl.asBoxControl
  margin-bottom: rem(10)

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

.FormControlInput
  +sans-typeset
  transition: background-color $speed $ease, border-color $speed $ease, color $speed $ease, width $speed $ease, height $speed $ease
  display: inline-block
  vertical-align: baseline
  width: 100%
  min-height: rem(40)
  background-color: transparent
  border: 0
  border-bottom: 1px solid #aaa
  color: black
  &:focus
    border-color: black
    outline: 0
  &::placeholder
    color: #aaa

.FormControlInput.asBoxControl
  height: rem(60)
  padding: 0 rem(10)
  background-color: #d8d8d8
  border: 1px solid #d8d8d8
  color: black
.FormControlInput.asBoxControl:focus
  background-color: white
  border-color: white
.FormControlInput.asBoxControl.onWhite:focus
  background-color: #666
  border-color: #666
  color: white

.hasValue:not(.isInitialValue) > .FormControlInput
  border-color: black

.hasValue:not(.isInitialValue) > .FormControlInput.asBoxControl
  background-color: white
  border-color: white
.hasValue:not(.isInitialValue) > .FormControlInput.asBoxControl.onWhite
  background-color: #666
  border-color: #666
  color: white

.isFailing > .FormControlInput,
.isFailing > .FormControlInput.asBoxControl,
.isFailing > .FormControlInput.asBoxControl.onWhite
  border-color: $danger

textarea.FormControlInput:not(.asBoxControl)
  height: rem(30)
  min-height: 0
  margin-top: rem(10)

textarea.FormControlInput.asBoxControl
  height: rem(120)
  padding-top: rem(20)
  padding-bottom: rem(20)
  margin-bottom: rem(-5)

.hasValue > textarea.FormControlInput:not(.asBoxControl),
.hasFocus > textarea.FormControlInput:not(.asBoxControl)
  height: rem(115)

@media(min-width: #{$break-3})
  .hasValue > textarea.FormControlInput:not(.asBoxControl),
  .hasFocus > textarea.FormControlInput:not(.asBoxControl)
    height: rem(85)

.BatchEmailControl .FormControlInput.asBoxControl
  height: rem(160)

[data-pathname^="/onboarding"] .NameControl > .FormControlInput
  +sans-bold-family
  font-size: 1rem

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

.FormControlLabel
  +sans-typeset
  transition: transform $speed2 $ease, opacity $speed2 $ease, color $speed2 $ease
  display: inline-block
  vertical-align: baseline
  position: absolute
  bottom: rem(-15)
  right: 0
  opacity: 0
  color: #aaa

.FormControlLabel.asBoxControl
  font-size: rem(11)
  top: rem(20)
  bottom: auto
  left: rem(11)
  right: auto

.isFailing > .FormControlLabel,
.hasFocus.hasValue > .FormControlLabel
  transform: translate3d(0,rem(10),0)
  opacity: 1

.isFailing > .FormControlLabel.asBoxControl,
.hasFocus.hasValue > .FormControlLabel.asBoxControl
  transform: translate3d(0,rem(-17),0)

.isFailing > .FormControlLabel
  color: $danger !important

.hasExceeded.hasValue > .FormControlLabel
  color: $danger

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

.FormControlSuggestionList
  transition: height $speed $ease
  overflow: hidden
  height: 0
  margin: 0
.FormControlSuggestionList.hasSuggestions
  height: rem(75)

.FormControlSuggestionList > p
  margin: rem(5) 0 0

.FormControlSuggestionList > button
  +sans-typeset
  transition: color $speed
  margin-right: rem(10)
  border-bottom: 1px solid

.no-touch .FormControlSuggestionList > button:hover
  color: #aaa

.FormControlSuggestionList > button:last-of-type
  margin-right: 0

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

.FormControlStatus
  transition: opacity $speed2
  position: absolute
  top: rem(15)
  right: rem(10)
.FormControlStatus:empty
  opacity: 0

.FormControlStatus > .SVGIcon > g
  stroke-width: 2

.FormControlStatus > .RequestIcon > g
  fill: #aaa
  stroke: transparent

.FormControlStatus > .SuccessIcon > g
  stroke-linejoin: bevel
  stroke: $success

.FormControlStatus > .FailureIcon > g
  stroke: $danger

[data-pathname^="/onboarding"] .FormControlStatus
  display: none


{'fraction_non_alphanumeric': 0.1479656305281779, 'fraction_numerical': 0.025018953752843062, 'mean_word_length': 3.6340749414519906, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 61, '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': '233987', 'n_tokens_mistral': 2788, 'n_tokens_neox': 2620, 'n_words': 573}