<commit_before>//-----------------------------
// Toggle
//-----------------------------

// Dependencies
@import '../../global/global';

// Local
@import 'vars';

// import-once
@import '../../import-once';

@include exports('toggle') {
  .bx--toggle {
    @include hidden;

    // Toggle Container
    &__label {
      @include font-smoothing;
      position: relative;
      display: block;
      margin: 1rem 0;
      height: $toggle-circle;
      transition-duration: $transition--base;
      cursor: pointer;
    }

    // Default Toggle Styles
    &__appearance {
      position: relative;
      display: inline-block;
      top: - $toggle-circle / 1.5;

      // toggle-bar
      &::before {
        position: absolute;
        display: block;
        content: '';
        width: $toggle-circle * 2;
        height: $toggle-bar;
        top: $toggle-circle / 2;
        background-color: $color__navy-gray-7;
        transition-duration: $transition--base;
        cursor: pointer;
      }

      // toggle-circle
      &::after {
        position: absolute;
        top: 0;
        display: block;
        border: $toggle-bar / 2 solid $color__navy-gray-3;
        cursor: pointer;
        width: $toggle-circle;
        height: $toggle-circle;
        background-color: $color__navy-gray-2;
        border-radius: 50%;
        content: '';
        transition-duration: $transition--base;
        box-shadow: inset 0 0 0 $toggle-bar / 2 $color__navy-gray-7;

        @include light-ui {
          background-color: $color__white;
          box-shadow: none;
          border: $toggle-bar / 2 solid $color__navy-gray-7;
        }
      }

      &:hover::after,
      &:focus::after {
        background-color: darken($color__navy-gray-2, 5%);

        @include light-ui {
          background-color: $color__navy-gray-8;
        }
      }
    }

    // Toggle Label Text
    &__text {
      // Common styles for --left and --right
      &--left,
      &--right {
        position: relative;
        top: $toggle-circle / 6;
        color: $color__navy-gray-7;

        @include light-ui {
          color: $color__navy-gray-6;
        }
      }

      // Left-label styles
      &--left {
        margin-right: .5rem;
      }

      // Right-label styles
      &--right {
        left: rem($toggle-circle * 2) + .5rem;
      }
    }

    // Focus Styles
    &:focus + &__label &__appearance {
      @include focus-outline;
    }
  }


  // Checked Toggle Styles
  .bx--toggle {
    &:checked + &__label &__appearance {
      // bar
      &::before {
        background-color: $color__blue-30;
      }

      // circle
      &::after {
        transform: translateX($toggle-circle);
        background-color: $color__blue-30;
        box-shadow: none;
        border-color: $color__blue-30;
      }
    }

    // If :checked, make right-label white
    // else, make left-label white
    .bx--toggle:checked + .bx--toggle__label &__text--right,
    .bx--toggle:not(:checked) + .bx--toggle__label &__text--left {
      color: $color__white;

      @include light-ui {
        color: $color__blue-90;
      }
    }
  }

  // Disabled Toggle Styles<commit_msg>Fix border and track color on toggle (#1575)<commit_after>//-----------------------------
// Toggle
//-----------------------------

// Dependencies
@import '../../global/global';

// Local
@import 'vars';

// import-once
@import '../../import-once';

@include exports('toggle') {
  .bx--toggle {
    @include hidden;

    // Toggle Container
    &__label {
      @include font-smoothing;
      position: relative;
      display: block;
      margin: 1rem 0;
      height: $toggle-circle;
      transition-duration: $transition--base;
      cursor: pointer;
    }

    // Default Toggle Styles
    &__appearance {
      position: relative;
      display: inline-block;
      top: - $toggle-circle / 1.5;

      // toggle-bar
      &::before {
        position: absolute;
        display: block;
        content: '';
        width: $toggle-circle * 2;
        height: $toggle-bar;
        top: $toggle-circle / 2;
        background-color: $color__navy-gray-7;
        transition-duration: $transition--base;
        cursor: pointer;
      }

      // toggle-circle
      &::after {
        position: absolute;
        top: 0;
        display: block;
        border: $toggle-bar / 2 solid $color__navy-gray-3;
        cursor: pointer;
        width: $toggle-circle;
        height: $toggle-circle;
        background-color: $color__navy-gray-2;
        border-radius: 50%;
        content: '';
        transition-duration: $transition--base;
        box-shadow: inset 0 0 0 $toggle-bar / 2 $color__navy-gray-7;

        @include light-ui {
          background-color: $color__white;
          box-shadow: none;
          border: $toggle-bar / 2 solid $color__navy-gray-7;
        }
      }

      &:hover::after,
      &:focus::after {
        background-color: darken($color__navy-gray-2, 5%);

        @include light-ui {
          background-color: $color__navy-gray-8;
        }
      }
    }

    // Toggle Label Text
    &__text {
      // Common styles for --left and --right
      &--left,
      &--right {
        position: relative;
        top: $toggle-circle / 6;
        color: $color__navy-gray-7;

        @include light-ui {
          color: $color__navy-gray-6;
        }
      }

      // Left-label styles
      &--left {
        margin-right: .5rem;
      }

      // Right-label styles
      &--right {
        left: rem($toggle-circle * 2) + .5rem;
      }
    }

    // Focus Styles
    &:focus + &__label &__appearance {
      @include focus-outline;
    }
  }


  // Checked Toggle Styles
  .bx--toggle {
    &:checked + &__label &__appearance {
      // bar
      &::before {
        background-color: $color__blue-51;
      }

      // circle
      &::after {
        transform: translateX($toggle-circle);
        background-color: $color__blue-30;
        box-shadow: none;
        border-color: $color__blue-51;
      }
    }

    // If :checked, make right-label white
    // else, make left-label white
    .bx--toggle:checked + .bx--toggle__label &__text--right,
    .bx--toggle:not(:checked) + .bx--toggle__label &__text--left {
      color: $color__white;

      @include light-ui {
        color: $color__blue-90;
      }
    }
  }

  // Disabled Toggle Styles
{'fraction_non_alphanumeric': 0.15615662840069194, 'fraction_numerical': 0.012266079572259789, 'mean_word_length': 1.5938009787928222, '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': '1079109', 'n_tokens_mistral': 2054, 'n_tokens_neox': 1955, 'n_words': 420}