<commit_before>// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group switch
////

/// Background color of a switch.
/// @type Color
$switch-background: $medium-gray !default;

/// Background active color of a switch.
/// @type Color
$switch-background-active: $primary-color !default;

/// Height of a switch, with no class applied.
/// @type Number
$switch-height: 2rem !default;

/// Height of a switch with .tiny class.
/// @type Number
$switch-height-tiny: 1.5rem !default;

/// Height of a switch with .small class.
/// @type Number
$switch-height-small: 1.75rem !default;

/// Height of a switch with .large class.
/// @type Number
$switch-height-large: 2.5rem !default;

/// Border radius of the switch
/// @type Number
$switch-radius: 0;

/// border around a modal.
/// @type Number
$switch-margin: $global-margin !default;

/// Background color for the switch container and paddle.
/// @type Color
$switch-paddle-background: $white !default;

/// border radius of the switch paddle
/// @type Number
$switch-paddle-radius: 0;

/// switch transition.
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;

// make them variables
// ask about accessibility on label
// change class name for text
// use ~ to select

@mixin foundation-switch {
  .switch {
    border: 0;
    margin-bottom: $switch-margin;
    outline: 0;
    padding: 0;
    position: relative;
    user-select: none;

    // These properties cascade down to the switch text
    color: $white;
    font-weight: bold;
    font-size: rem-calc(14);

  //size mixin , width height padding font-size - width height /2
    &.tiny .switch-paddle {
      height: 1.5rem;
      width: 3rem;
      font-size: rem-calc(10);

      &:after {
        height: 1rem;
        width: 1rem;
      }
    }

    &.small .switch-paddle {
      height: 1.75rem;
      width: 3.5rem;
      font-size: rem-calc(12);

      &:after {
        height: 1.25rem;
        width: 1.25rem;
      }
    }

    &.large .switch-paddle {
      height: 2.5rem;
      width: 5rem;
      font-size: rem-calc(16);

      &:after {
        height: 2rem;
        width: 2rem;
      }
    }

    &.tiny .switch-input:checked ~ .switch-paddle:after {
      left: 1.75rem;
    }

    &.small .switch-input:checked ~ .switch-paddle:after {
      left: 2rem;
    }

    &.large .switch-input:checked ~ .switch-paddle:after {
      left: 2.75rem;
    }
  }

  .switch-paddle {
    background: $switch-background;
    cursor: $cursor-pointer-value;
    display: block;
    margin-bottom: $global-margin;
    position: relative;
    text-indent: 100%;
    width: 4rem;
    height: $switch-height;
    transition: $switch-paddle-transition;
    border-radius: $switch-radius;
    color: inherit;
    font-weight: inherit;

    &:after {
      background: $switch-paddle-background;
      content: '';
      display: block;
      position: absolute;
      height: 1.5rem;
      left: 0.25rem;
      top: 0.25rem;
      width: 1.5rem;
      transition: $switch-paddle-transition;
      transform: translate3d(0, 0, 0);
    }
  }

  .switch-input {
    opacity: 0;
    position: absolute;

    & ~ .switch-paddle {
      margin-left: 0;
      margin-right: 0;
    }

    &:checked ~ .switch-paddle {
      background: $switch-background-active;

      &:after {
        left: 2.25rem;
      }
    }
    
    &:checked ~ .switch-paddle .switch-active {
      display: block;
    }

    &:checked ~ .switch-paddle .switch-disabled {
      display: none;
    }

  // This styles the outline on focus for accessibility
    &:focus ~ .switch-paddle {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      overflow: hidden;
    }
  }

  %switch-text {
    position: absolute;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .switch-active {
    @extend %switch-text;
    left: -90%;
    display: none;
  }

  .switch-disabled {
    @extend %switch-text;
    right: 15%;
  }
}<commit_msg>Reorganize switch CSS so each piece is more isolated<commit_after>// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group switch
////

/// Background color of a switch.
/// @type Color
$switch-background: $medium-gray !default;

/// Background active color of a switch.
/// @type Color
$switch-background-active: $primary-color !default;

/// Height of a switch, with no class applied.
/// @type Number
$switch-height: 2rem !default;

/// Height of a switch with .tiny class.
/// @type Number
$switch-height-tiny: 1.5rem !default;

/// Height of a switch with .small class.
/// @type Number
$switch-height-small: 1.75rem !default;

/// Height of a switch with .large class.
/// @type Number
$switch-height-large: 2.5rem !default;

/// Border radius of the switch
/// @type Number
$switch-radius: 0;

/// border around a modal.
/// @type Number
$switch-margin: $global-margin !default;

/// Background color for the switch container and paddle.
/// @type Color
$switch-paddle-background: $white !default;

/// border radius of the switch paddle
/// @type Number
$switch-paddle-radius: 0;

/// switch transition.
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;

// make them variables
// ask about accessibility on label
// change class name for text
// use ~ to select

@mixin foundation-switch {
  .switch {
    border: 0;
    margin-bottom: $switch-margin;
    outline: 0;
    padding: 0;
    position: relative;
    user-select: none;

    // These properties cascade down to the switch text
    color: $white;
    font-weight: bold;
    font-size: rem-calc(14);
  }

  .switch-input {
    opacity: 0;
    position: absolute;
  }

  .switch-paddle {
    background: $switch-background;
    cursor: $cursor-pointer-value;
    display: block;
    position: relative;
    text-indent: 100%;
    width: 4rem;
    height: $switch-height;
    transition: $switch-paddle-transition;
    border-radius: $switch-radius;
    color: inherit;
    font-weight: inherit;

    // Needed to override specificity
    input + & {
      margin: 0;
    }

    &::after {
      background: $switch-paddle-background;
      content: '';
      display: block;
      position: absolute;
      height: 1.5rem;
      left: 0.25rem;
      top: 0.25rem;
      width: 1.5rem;
      transition: $switch-paddle-transition;
      transform: translate3d(0, 0, 0);
    }

    input:checked ~ & {
      background: $switch-background-active;

      &::after {
        left: 2.25rem;
      }
    }

    // This styles the outline on focus for accessibility
    input:focus ~ & {
      outline: thin dotted #333;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      overflow: hidden;
    }
  }

  %switch-text {
    position: absolute;
    padding: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .switch-active {
    @extend %switch-text;
    left: -90%;
    display: none;

    input:checked + label > & {
      display: block;
    }
  }

  .switch-disabled {
    @extend %switch-text;
    right: 15%;

    input:checked + label > & {
      display: none;
    }
  }

  .switch.tiny {
    .switch-paddle {
      height: 1.5rem;
      width: 3rem;
      font-size: rem-calc(10);

      &::after {
        height: 1rem;
        width: 1rem;
      }
    }
    .switch-input:checked ~ .switch-paddle:after {
      left: 1.75rem;
    }
  }

  .switch.small {
    .switch-paddle {
      height: 1.75rem;
      width: 3.5rem;
      font-size: rem-calc(12);

      &::after {
        height: 1.25rem;
        width: 1.25rem;
      }
    }

    .switch-input:checked ~ .switch-paddle:after {
      left: 2rem;
    }
  }

  .switch.large {
    .switch-paddle {
      height: 2.5rem;
      width: 5rem;
      font-size: rem-calc(16);

      &::after {
        height: 2rem;
        width: 2rem;
      }
    }

    .switch-input:checked ~ .switch-paddle:after {
      left: 2.75rem;
    }
  }
}
{'fraction_non_alphanumeric': 0.14003500875218805, 'fraction_numerical': 0.02250562640660165, 'mean_word_length': 2.149212598425197, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '4984061', 'n_tokens_mistral': 2796, 'n_tokens_neox': 2606, 'n_words': 706}