<commit_before>// =======================================
// RESETS, CLEARFIXES
// =======================================
=reset
  margin: 0
  padding: 0
  box-sizing: border-box

=clearfix
  display: inline-block

  // Pseudo
  &:after
    visibility: hidden
    display: block
    font-size: 0
    content: ""
    clear: both
    height: 0

// =======================================
// INPUT CONTROL
// =======================================
=input-control
    position: relative
    display: inline-flex
    justify-content: flex-start
    align-items: center
    height: 4.0rem
    padding: 1.0rem
    appearance: none
    border: 1px solid $color-none
    outline: none
    box-shadow: none
    
    // Pseudo
    &:focus,
    &:active
        border-color: map-get($theme-map, primary)
        box-shadow: 0 0 1.2rem rgba($lblue_base, 0.5)
    &:disabled
        user-select: none
        cursor: not-allowed
        opacity: 0.5

        // Pseudo
        &:hover
            border-color: $color-none
            box-shadow: 0 0 1.2rem rgba($color-none, 0)

// =======================================
// HAMBURGER ICON
// =======================================
=hamburger($size: 3rem, $color: #DFDFDF)
  position: relative
  display: block
  width: $size
  height: $size
  background-color: transparent
  cursor: pointer

  // Elements
  span
    position: absolute
    display: block
    width: 2.0rem
    height: 0.3rem
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    background-color: $color
    transition: all 0.3s ease-in-out

    // Pseudo
    &:nth-child(1)
      margin-top: -0.5em
    &:nth-child(2)
      margin-top: 0
    &:nth-child(3)
      margin-top: 0.5em

  // Modifiers
  &.make-active
    span
      background-color: map-get($theme-maps, primary)

      // Pseudo
      &:nth-child(1)
        margin:
          top: -0.2em
          left: -1.2rem
        transform: rotate(45deg)
      &:nth-child(2)
        width: 0
        opacity: 0
      &:nth-child(3)
        margin:
          top: -0.2em
          left: -1.2rem
        transform: rotate(45deg)

// =======================================
// ARROW ICON
// =======================================
=arrow($direction, $size: 5px, $color: map-get($theme-maps, dark))
  width: 0
  height: 0

  @if $direction == 'up'
    border:
      left: $size solid $color-none
      right: $size solid $color-none
      bottom: $size solid $color
  @else if $direction == 'down'
    border:
      left: $size solid $color-none
      right: $size solid $color-none
      top: $size solid $color
  @else if $direction == 'left'
    border:
      top: $size solid $color-none
      bottom: $size solid $color-none
      right: $size solid $color
  @else if $direction == 'right'
    border:
      top: $size solid $color-none
      bottom: $size solid $color-none
      left: $size solid $color
  @else
    @warn ("Error: Your direction can only be \'left\', \'right\', \'up\', or \'down\''")

// End of Arrow

// ===========================================
// BREAKPOINT VIEWS
// ===========================================
=mobile
  @media screen and (max-width: $bp-medium - 1)
    @content

=tablet
  @media screen and (min-width: $bp-medium)
    @content

=tablet-only
  @media screen and (min-width: $bp-medium) and (max-width: $bp-xlarge - 1)
    @content

=desktop
  @media screen and (min-width: $bp-xlarge)
    @content

=desktop-only
  @media screen and (min-width: $bp-xlarge) and (max-width: $bp-fullhd - 1)
    @content

=fullhd
  @media screen and (min-width: $bp-fullhd)
    @content<commit_msg>fix(input): Minor fix on input control.<commit_after>// =======================================
// RESETS, CLEARFIXES
// =======================================
=reset
  margin: 0
  padding: 0
  box-sizing: border-box

=clearfix
  display: inline-block

  // Pseudo
  &:after
    visibility: hidden
    display: block
    font-size: 0
    content: ""
    clear: both
    height: 0

// =======================================
// INPUT CONTROL
// =======================================
=input-control
    position: relative
    display: inline-flex
    flex:
      grow: 1
      shrink: 0
      basis: auto
    justify-content: flex-start
    align-items: center
    height: 4.0rem
    padding: 1.0rem
    appearance: none
    border: 1px solid $color-none
    outline: none
    box-shadow: none
    
    // Pseudo
    &:focus,
    &:active
        border-color: map-get($theme-map, primary)
        box-shadow: 0 0 1.2rem rgba($lblue_base, 0.5)
    &:disabled
        user-select: none
        cursor: not-allowed
        opacity: 0.5

        // Pseudo
        &:hover
            border-color: $color-none
            box-shadow: 0 0 1.2rem rgba($color-none, 0)

// =======================================
// HAMBURGER ICON
// =======================================
=hamburger($size: 3rem, $color: #DFDFDF)
  position: relative
  display: block
  width: $size
  height: $size
  background-color: transparent
  cursor: pointer

  // Elements
  span
    position: absolute
    display: block
    width: 2.0rem
    height: 0.3rem
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    background-color: $color
    transition: all 0.3s ease-in-out

    // Pseudo
    &:nth-child(1)
      margin-top: -0.5em
    &:nth-child(2)
      margin-top: 0
    &:nth-child(3)
      margin-top: 0.5em

  // Modifiers
  &.make-active
    span
      background-color: map-get($theme-maps, primary)

      // Pseudo
      &:nth-child(1)
        margin:
          top: -0.2em
          left: -1.2rem
        transform: rotate(45deg)
      &:nth-child(2)
        width: 0
        opacity: 0
      &:nth-child(3)
        margin:
          top: -0.2em
          left: -1.2rem
        transform: rotate(45deg)

// =======================================
// ARROW ICON
// =======================================
=arrow($direction, $size: 5px, $color: map-get($theme-maps, dark))
  width: 0
  height: 0

  @if $direction == 'up'
    border:
      left: $size solid $color-none
      right: $size solid $color-none
      bottom: $size solid $color
  @else if $direction == 'down'
    border:
      left: $size solid $color-none
      right: $size solid $color-none
      top: $size solid $color
  @else if $direction == 'left'
    border:
      top: $size solid $color-none
      bottom: $size solid $color-none
      right: $size solid $color
  @else if $direction == 'right'
    border:
      top: $size solid $color-none
      bottom: $size solid $color-none
      left: $size solid $color
  @else
    @warn ("Error: Your direction can only be \'left\', \'right\', \'up\', or \'down\''")

// End of Arrow

// ===========================================
// BREAKPOINT VIEWS
// ===========================================
=mobile
  @media screen and (max-width: $bp-medium - 1)
    @content

=tablet
  @media screen and (min-width: $bp-medium)
    @content

=tablet-only
  @media screen and (min-width: $bp-medium) and (max-width: $bp-xlarge - 1)
    @content

=desktop
  @media screen and (min-width: $bp-xlarge)
    @content

=desktop-only
  @media screen and (min-width: $bp-xlarge) and (max-width: $bp-fullhd - 1)
    @content

=fullhd
  @media screen and (min-width: $bp-fullhd)
    @content
{'fraction_non_alphanumeric': 0.23024149286498352, 'fraction_numerical': 0.01893523600439078, 'mean_word_length': 2.4414542020774315, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '7031513', 'n_tokens_mistral': 2519, 'n_tokens_neox': 2344, 'n_words': 625}