<commit_before>$size: 10px;

.toggle {
  cursor: pointer;
  font-weight: $weight-semibold;
  position: relative;

  &.is-disabled {
    color: $grey-blue;
    cursor: not-allowed;
  }

  .input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
  }

  .toggler {
    display: inline-block;
    position: relative;
    width: $size * 2;
    height: $size;
    border-radius: $size;
    background: $grey-blue;
    transition: background 0.3s ease-in-out;

    &::after {
      content: ' ';
      display: block;
      position: absolute;
      width: calc(#{$size} - 2px);
      height: calc(#{$size} - 2px);
      border-radius: 100%;
      background: $white;
      left: 2px;
      top: 1px;
      transform: translateX(0);
      transition: transform 0.3s ease-in-out;
    }
  }

  // Always style the toggler based off the input state to
  // ensure that the native input is driving behavior.
  .input:focus + .toggler {
    box-shadow: 0 0 0 1px $grey-light;
    outline: none;
  }

  .input:checked + .toggler {
    background: $blue;

    &::after {
      transform: translateX(100%);
    }
  }

  .input:checked:focus + .toggler {
    box-shadow: 0 0 0 1px rgba($blue, 0.5);<commit_msg>Increase the size and spacing of the toggle component<commit_after>$size: 12px;

.toggle {
  cursor: pointer;
  font-weight: $weight-semibold;
  position: relative;

  &.is-disabled {
    color: $grey-blue;
    cursor: not-allowed;
  }

  .input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
  }

  .toggler {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: $size * 2;
    height: $size;
    border-radius: $size;
    background: $grey-blue;
    transition: background 0.3s ease-in-out;

    &::after {
      content: ' ';
      display: block;
      position: absolute;
      width: calc(#{$size} - 4px);
      height: calc(#{$size} - 4px);
      border-radius: 100%;
      background: $white;
      left: 2px;
      top: 2px;
      transform: translateX(0);
      transition: transform 0.3s ease-in-out;
    }
  }

  // Always style the toggler based off the input state to
  // ensure that the native input is driving behavior.
  .input:focus + .toggler {
    box-shadow: 0 0 0 1px $grey-light;
    outline: none;
  }

  .input:checked + .toggler {
    background: $blue;

    &::after {
      transform: translateX($size);
    }
  }

  .input:checked:focus + .toggler {
    box-shadow: 0 0 0 1px rgba($blue, 0.5);
{'fraction_non_alphanumeric': 0.13857086458744572, 'fraction_numerical': 0.024082116067903673, 'mean_word_length': 2.290909090909091, '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': '3502426', 'n_tokens_mistral': 959, 'n_tokens_neox': 877, 'n_words': 235}