<commit_before>////
/// @group input
////


// Hide the native control
.sprk-b-Checkbox__input {
  opacity: $sprk-checkbox-input-opacity;
}

.sprk-b-Checkbox__label {
  position: relative;
}

.sprk-b-Checkbox__label::before,
.sprk-b-Checkbox__label::after {
  transition: $sprk-checkbox-transition;
  position: absolute;
  display: inline-block;
}

// Custom checkbox styles
.sprk-b-Checkbox__label::before {
  content: "";
  height: $sprk-checkbox-custom-input-height;
  width: $sprk-checkbox-custom-input-width;
  border: $sprk-checkbox-custom-input-border;
  border-radius: $sprk-checkbox-custom-input-border-radius;
  top: $sprk-checkbox-custom-input-top;
  left: $sprk-checkbox-custom-input-left;
}

// Custom checkmark icon styles
.sprk-b-Checkbox__label::after {
  content: none;
  height: $sprk-checkbox-checkmark-icon-height;
  width: $sprk-checkbox-checkmark-icon-width;
  left: $sprk-checkbox-checkmark-icon-left;
  top: $sprk-checkbox-checkmark-icon-top;
  border-left: $sprk-checkbox-checkmark-border-left;
  border-bottom: $sprk-checkbox-checkmark-border-bottom;
  transform: $sprk-checkbox-checkmark-transform;
}

// Focus styles for unchecked checkbox
.sprk-b-Checkbox__input:focus + .sprk-b-Checkbox__label::before {
  border: $sprk-checkbox-custom-input-border-focus;
  background-color: $sprk-checkbox-custom-input-background-color-focus;
}

// Hover styles for unchecked checkbox
.sprk-b-Checkbox__input:hover + .sprk-b-Checkbox__label::before {
  background-color: $sprk-checkbox-custom-input-background-color-hover;
  border-color: $sprk-checkbox-custom-input-border-color-hover;
}

// Checked styles for checkbox and label
.sprk-b-Checkbox__input:checked {
  // Show checkmark icon when checked
  + .sprk-b-Checkbox__label::after {
    content: "";
  }

  + .sprk-b-Checkbox__label::before {
    background-color: $sprk-checkbox-custom-input-background-color-checked;
    border-color: $sprk-checkbox-custom-input-border-color-checked;
  }

  &:focus {
    // Override focus border color if its checked
    + .sprk-b-Checkbox__label::before {
      border: $sprk-checkbox-custom-input-border-focus-checked;
    }
  }
}

// Disabled styles for checkbox and label
.sprk-b-Checkbox__input:disabled + .sprk-b-Checkbox__label::before {
  cursor: $sprk-checkbox-custom-input-cursor-disabled;
  border-color: $sprk-checkbox-custom-input-border-color-disabled;
  background-color: $sprk-checkbox-custom-input-background-color-disabled;
}


.sprk-b-Checkbox--huge {
  max-width: $sprk-checkbox-input-huge-max-width;

  .sprk-b-Checkbox__label {
    transition: $sprk-checkbox-huge-container-transition;
    border: $sprk-checkbox-huge-container-border;
    border-radius: $sprk-checkbox-huge-container-border-radius;

    padding: $sprk-checkbox-huge-container-padding;
    flex-basis: $sprk-checkbox-huge-container-flex-basis;
    line-height: $sprk-checkbox-huge-container-line-height;

    // The custom checkbox element
    &::before {
      height: $sprk-checkbox-huge-custom-input-height;
      width: $sprk-checkbox-huge-custom-input-width;
      top: $sprk-checkbox-huge-custom-input-top;
      left: $sprk-checkbox-huge-custom-input-left;
    }

    // The checkmark that shows up in the box
    &::after {
      content: none;
      height: $sprk-checkbox-huge-checkmark-icon-height;
      // 0.76736rem -- 1.444444 is the ratio
      width: $sprk-checkbox-huge-checkmark-icon-width;
      left: $sprk-checkbox-huge-checkmark-icon-left;
      top: $sprk-checkbox-huge-checkmark-icon-top;
    }

    &:hover {
      border-color: $sprk-checkbox-huge-container-hover-border-color;
      box-shadow: $sprk-checkbox-huge-container-hover-box-shadow;

      &::before {
        border-color: $sprk-checkbox-huge-custom-input-hover-border-color;
      }
    }
  }

  .sprk-b-Checkbox__input {
    position: absolute;

    &:disabled {
      & + .sprk-b-Checkbox__label {
        border-color: $sprk-checkbox-huge-container-disabled-border-color;
        background: $sprk-checkbox-huge-container-disabled-background;

        &::before {
          border-color: $sprk-checkbox-huge-custom-input-disabled-border-color;
        }
      }

      &:hover + .sprk-b-Checkbox__label {
        box-shadow: $sprk-checkbox-huge-container-disabled-box-shadow;
      }
    }

    // Styles for container when focused by keyboard
    &:focus {
      & + .sprk-b-Checkbox__label {
        // Container's border color when focused through keyboard
        border-color: $sprk-checkbox-huge-container-focus-border-color;

        // Custom checkbox element border color when focused through keyboard
        &:hover {
          border-color: $sprk-checkbox-huge-container-focus-hover-border-color;
        }
      }
    }

    &:checked  {
      & + .sprk-b-Checkbox__label {
        // Container's border color when checked
        border-color: $sprk-checkbox-huge-container-checked-border-color;

        // Container's border color when checked and hovered
        &:hover {
          border-color: $sprk-checkbox-huge-container-checked-hover-border-color;
        }

        // Custom checkbox element's border color when checked
        &::before {
          border-color: $sprk-checkbox-huge-custom-input-checkbox-element-checked-border-color;
        }
      }

      // Styles for container when checkbox is focused on while being checked
      &:focus + .sprk-b-Checkbox__label {
        border-color: $sprk-checkbox-huge-container-focus-checked-border-color;
      }
    }
  }
}<commit_msg>test scss lint<commit_after>////
/// @group input
////

// Hide the native control
.sprk-b-Checkbox__input {
  opacity: $sprk-checkbox-input-opacity;
}

.sprk-b-Checkbox__label {
  position: relative;
}

.sprk-b-Checkbox__label::before,
.sprk-b-Checkbox__label::after {
  transition: $sprk-checkbox-transition;
  position: absolute;
  display: inline-block;
}

// Custom checkbox styles
.sprk-b-Checkbox__label::before {
  content: '';
  height: $sprk-checkbox-custom-input-height;
  width: $sprk-checkbox-custom-input-width;
  border: $sprk-checkbox-custom-input-border;
  border-radius: $sprk-checkbox-custom-input-border-radius;
  top: $sprk-checkbox-custom-input-top;
  left: $sprk-checkbox-custom-input-left;
}

// Custom checkmark icon styles
.sprk-b-Checkbox__label::after {
  content: none;
  height: $sprk-checkbox-checkmark-icon-height;
  width: $sprk-checkbox-checkmark-icon-width;
  left: $sprk-checkbox-checkmark-icon-left;
  top: $sprk-checkbox-checkmark-icon-top;
  border-left: $sprk-checkbox-checkmark-border-left;
  border-bottom: $sprk-checkbox-checkmark-border-bottom;
  transform: $sprk-checkbox-checkmark-transform;
}

// Focus styles for unchecked checkbox
.sprk-b-Checkbox__input:focus + .sprk-b-Checkbox__label::before {
  border: $sprk-checkbox-custom-input-border-focus;
  background-color: $sprk-checkbox-custom-input-background-color-focus;
}

// Hover styles for unchecked checkbox
.sprk-b-Checkbox__input:hover + .sprk-b-Checkbox__label::before {
  background-color: $sprk-checkbox-custom-input-background-color-hover;
  border-color: $sprk-checkbox-custom-input-border-color-hover;
}

// Checked styles for checkbox and label
.sprk-b-Checkbox__input:checked {
  // Show checkmark icon when checked
  + .sprk-b-Checkbox__label::after {
    content: '';
  }

  + .sprk-b-Checkbox__label::before {
    background-color: $sprk-checkbox-custom-input-background-color-checked;
    border-color: $sprk-checkbox-custom-input-border-color-checked;
  }

  &:focus {
    // Override focus border color if its checked
    + .sprk-b-Checkbox__label::before {
      border: $sprk-checkbox-custom-input-border-focus-checked;
    }
  }
}

// Disabled styles for checkbox and label
.sprk-b-Checkbox__input:disabled + .sprk-b-Checkbox__label::before {
  cursor: $sprk-checkbox-custom-input-cursor-disabled;
  border-color: $sprk-checkbox-custom-input-border-color-disabled;
  background-color: $sprk-checkbox-custom-input-background-color-disabled;
}

.sprk-b-Checkbox--huge {
  max-width: $sprk-checkbox-input-huge-max-width;

  .sprk-b-Checkbox__label {
    transition: $sprk-checkbox-huge-container-transition;
    border: $sprk-checkbox-huge-container-border;
    border-radius: $sprk-checkbox-huge-container-border-radius;
    padding: $sprk-checkbox-huge-container-padding;
    flex-basis: $sprk-checkbox-huge-container-flex-basis;
    line-height: $sprk-checkbox-huge-container-line-height;

    // The custom checkbox element
    &::before {
      height: $sprk-checkbox-huge-custom-input-height;
      width: $sprk-checkbox-huge-custom-input-width;
      top: $sprk-checkbox-huge-custom-input-top;
      left: $sprk-checkbox-huge-custom-input-left;
    }

    // The checkmark that shows up in the box
    &::after {
      content: none;
      height: $sprk-checkbox-huge-checkmark-icon-height;
      // 0.76736rem -- 1.444444 is the ratio
      width: $sprk-checkbox-huge-checkmark-icon-width;
      left: $sprk-checkbox-huge-checkmark-icon-left;
      top: $sprk-checkbox-huge-checkmark-icon-top;
    }

    &:hover {
      border-color: $sprk-checkbox-huge-container-hover-border-color;
      box-shadow: $sprk-checkbox-huge-container-hover-box-shadow;

      &::before {
        /* stylelint-disable-line max-nesting-depth */
        border-color: $sprk-checkbox-huge-custom-input-hover-border-color;
      }
    }
  }

  .sprk-b-Checkbox__input {
    position: absolute;

    &:disabled {
      /* stylelint-disable max-nesting-depth */
      + .sprk-b-Checkbox__label {
        border-color: $sprk-checkbox-huge-container-disabled-border-color;
        background: $sprk-checkbox-huge-container-disabled-background;

        &::before {
          border-color: $sprk-checkbox-huge-custom-input-disabled-border-color;
        }
      }

      &:hover + .sprk-b-Checkbox__label {
        box-shadow: $sprk-checkbox-huge-container-disabled-box-shadow;
      }

      /* stylelint-enable max-nesting-depth */
    }

    // Styles for container when focused by keyboard
    &:focus {
      /* stylelint-disable max-nesting-depth */
      + .sprk-b-Checkbox__label {
        // Container's border color when focused through keyboard
        border-color: $sprk-checkbox-huge-container-focus-border-color;

        // Custom checkbox element border color when focused through keyboard
        &:hover {
          border-color: $sprk-checkbox-huge-container-focus-hover-border-color;
        }
      }

      /* stylelint-enable max-nesting-depth */
    }

    &:checked {
      /* stylelint-disable max-nesting-depth */
      + .sprk-b-Checkbox__label {
        // Container's border color when checked
        border-color: $sprk-checkbox-huge-container-checked-border-color;

        // Container's border color when checked and hovered
        &:hover {
          border-color: $sprk-checkbox-huge-container-checked-hover-border-color;
        }

        // Custom checkbox element's border color when checked
        &::before {
          border-color: $sprk-checkbox-huge-custom-input-checkbox-element-checked-border-color;
        }
      }

      // Styles for container when checkbox is focused on while being checked
      &:focus + .sprk-b-Checkbox__label {
        border-color: $sprk-checkbox-huge-container-focus-checked-border-color;
      }

      /* stylelint-enable max-nesting-depth */
    }
  }
}
{'fraction_non_alphanumeric': 0.13624338624338625, 'fraction_numerical': 0.002292768959435626, 'mean_word_length': 2.9557028252528776, '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': '7225329', 'n_tokens_mistral': 3842, 'n_tokens_neox': 3745, 'n_words': 568}