<commit_before>@import "~disco/css/inc/vars";
@import "~core/css/inc/mixins";

$size: 26px;
$borderSize: 1px;

$transition: 0.3s;

$switchHandleActive: #fff;
$switchHandleInactive: transparentize($switchHandleActive, 0.75);
$switchHandleGap: 1px;
$switchHandleDisabledOpacity: 0.25;
$switchToBackgroundRatio: 2.7;

$switchStrokeOff: #858585;
$switchStrokeOn: #00a920;
$switchStrokeWidth: 1px;
$switchHandleActivePosition: round(($size * $switchToBackgroundRatio) - ($size + ($switchHandleGap * 2 + $switchStrokeWidth)));

$switchBackgroundOn: #57bd35;
$switchBackgroundOff: #919191;

$uninstallStripeColor1: #b1b1b1;
$uninstallStripeColor2: #d4d4d4;

$installStripeColor1: #00a920;
$installStripeColor2: #00c42e;

@keyframes stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: $size $size/2;
  }
}

@mixin stripes($color1, $color2) {
  animation: stripes 0.5s linear infinite;
  background-image:
    repeating-linear-gradient(
      45deg,
      $color1,
      $color1 25%,
      $color2 25%,
      $color2 50%,
      $color1 50%
    );
  background-size: $size/2 $size/2;
}

.switch {
  position: relative;

  &.installed::after {
    background: url('../img/tick.svg') no-repeat 50% 50%;
    color: #fff;
    content: '';
    display: block;
    font-family: sans-serif;
    height: 16px;
    left: $size;
    // Allow mouse events to pass-through the image.
    pointer-events: none;
    position: absolute;
    top: ($size + ($switchHandleGap * 2))/2;
    transform: translate(-50%, -50%);
    width: 16px;
  }

  input:focus + label {
    @include focus();
  }

  input + label {
    background: #919191;
    border-radius: $size;
    border: $switchStrokeWidth solid $switchStrokeOff;
    cursor: pointer;
    display: block;
    height: $size + ($switchHandleGap * 2) + ($switchStrokeWidth * 2);
    overflow: hidden;
    position: relative;
    width: round($size * $switchToBackgroundRatio);
    transition: border $transition;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
    }

    // Switch background.
    &::before {
      border-radius: $size;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      transition: background $transition;
    }

    // Handle.
    &::after {
      background: $switchHandleActive;
      border-radius: 50%;
      bottom: $switchHandleGap;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
      transform: translateX($switchHandleGap);
      top: $switchHandleGap;<commit_msg>Remove transition from install background<commit_after>@import "~disco/css/inc/vars";
@import "~core/css/inc/mixins";

$size: 26px;
$borderSize: 1px;

$transition: 0.3s;

$switchHandleActive: #fff;
$switchHandleInactive: transparentize($switchHandleActive, 0.75);
$switchHandleGap: 1px;
$switchHandleDisabledOpacity: 0.25;
$switchToBackgroundRatio: 2.7;

$switchStrokeOff: #858585;
$switchStrokeOn: #00a920;
$switchStrokeWidth: 1px;
$switchHandleActivePosition: round(($size * $switchToBackgroundRatio) - ($size + ($switchHandleGap * 2 + $switchStrokeWidth)));

$switchBackgroundOn: #57bd35;
$switchBackgroundOff: #919191;

$uninstallStripeColor1: #b1b1b1;
$uninstallStripeColor2: #d4d4d4;

$installStripeColor1: #00a920;
$installStripeColor2: #00c42e;

@keyframes stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: $size $size/2;
  }
}

@mixin stripes($color1, $color2) {
  animation: stripes 0.5s linear infinite;
  background-image:
    repeating-linear-gradient(
      45deg,
      $color1,
      $color1 25%,
      $color2 25%,
      $color2 50%,
      $color1 50%
    );
  background-size: $size/2 $size/2;
}

.switch {
  position: relative;

  &.installed::after {
    background: url('../img/tick.svg') no-repeat 50% 50%;
    color: #fff;
    content: '';
    display: block;
    font-family: sans-serif;
    height: 16px;
    left: $size;
    // Allow mouse events to pass-through the image.
    pointer-events: none;
    position: absolute;
    top: ($size + ($switchHandleGap * 2))/2;
    transform: translate(-50%, -50%);
    width: 16px;
  }

  input:focus + label {
    @include focus();
  }

  input + label {
    background: #919191;
    border-radius: $size;
    border: $switchStrokeWidth solid $switchStrokeOff;
    cursor: pointer;
    display: block;
    height: $size + ($switchHandleGap * 2) + ($switchStrokeWidth * 2);
    overflow: hidden;
    position: relative;
    width: round($size * $switchToBackgroundRatio);
    transition: border $transition;

    &::before,
    &::after {
      content: "";
      display: block;
      position: absolute;
    }

    // Switch background.
    &::before {
      border-radius: $size;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
    }

    // Handle.
    &::after {
      background: $switchHandleActive;
      border-radius: 50%;
      bottom: $switchHandleGap;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
      transform: translateX($switchHandleGap);
      top: $switchHandleGap;
{'fraction_non_alphanumeric': 0.14345403899721448, 'fraction_numerical': 0.04655789892558695, 'mean_word_length': 3.2314814814814814, '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': '1057964', 'n_tokens_mistral': 1897, 'n_tokens_neox': 1739, 'n_words': 392}