<commit_before>@use '../../config' as c;
@use '../../protocol' as p;

// Checkboxes
//
// .has-disabled  - Indicates a disabled field. `disabled` should also be applied as an attribute to the field itself.
//
// Markup: ../../../../../../styleguide/styleguide-examples/field_checkbox.njk
//
// Weight: 4
//
// Style guide: forms.checkboxes

.checkbox,
.radio {
  [type=checkbox],
  [type=radio] {
    position: absolute;
    left: -9999px;
  }

  label {
    font-weight: 400;
    position: relative;
    padding:  0 0 0 36px;

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      margin-right: p.$spacing-md;
      width: 20px;
      height: 20px;
      border: 2px solid var(--field-border-color-default);
      border-radius: 2px;
      background-color: var(--color-white);
      vertical-align: middle;
      content: "";
    }

    &:hover:before {
      border-color: var(--field-border-color-hover);
    }
  }

  &.no-label {
    margin-bottom: 0;
    min-width: 20px;

    label {
      margin: 0;<commit_msg>RTL checkboxes and radios fixed, ref https://github.com/mozilla/sumo-project/issues/325<commit_after>@use '../../config' as c;
@use '../../protocol' as p;

// Checkboxes
//
// .has-disabled  - Indicates a disabled field. `disabled` should also be applied as an attribute to the field itself.
//
// Markup: ../../../../../../styleguide/styleguide-examples/field_checkbox.njk
//
// Weight: 4
//
// Style guide: forms.checkboxes

.checkbox,
.radio {
  overflow: hidden;

  [type=checkbox],
  [type=radio] {
    position: absolute;
    left: -9999px;
  }

  label {
    font-weight: 400;
    position: relative;
    @include p.bidi((
      (padding, 0 0 0 36px, 0 36px 0 0),
    ));

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      @include p.bidi((
        (margin-right, p.$spacing-md, 0),
        (margin-left, 0,  p.$spacing-md),
        (left, 0,  auto),
        (right, auto, 0),
      ));

      width: 20px;
      height: 20px;
      border: 2px solid var(--field-border-color-default);
      border-radius: 2px;
      background-color: var(--color-white);
      vertical-align: middle;
      content: "";
    }

    &:hover:before {
      border-color: var(--field-border-color-hover);
    }
  }

  &.no-label {
    margin-bottom: 0;
    min-width: 20px;

    label {
      margin: 0;
{'fraction_non_alphanumeric': 0.1709075487701442, 'fraction_numerical': 0.026293469041560644, 'mean_word_length': 2.0438709677419356, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 1, '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': '1693229', 'n_tokens_mistral': 870, 'n_tokens_neox': 799, 'n_words': 197}