<commit_before>@import '../../hqwebapp/less/_hq/includes/variables.less';
@import '../../hqwebapp/less/_hq/includes/mixins.less';

@toggle-switch-height: 34px;
@toggle-switch-width: 60px;
@slider-padding: 4px;
@slider-height: @toggle-switch-height - @slider-padding * 2;

.switch {
  display: inline-block;
  height: @toggle-switch-height;
  position: relative;
  width: @toggle-switch-width;

  input {
    display: none;
  }
}

.slider {
  background-color: @cc-brand-mid;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: .4s;

  &::before {
    background-color: #ffffff;
    bottom: @slider-padding;
    content: "";
    height: @slider-height;
    left: @slider-padding;
    position: absolute;
    transition: .4s;
    width: @slider-height;
  }
}

input:checked + .slider {
  background-color: @cc-brand-mid;
}

input:focus + .slider {
  box-shadow: 0 0 1px #6c7980;
}

input:checked + .slider:before {
  transform: translateX(@slider-height);
}

.slider.round {
  border-radius: @toggle-switch-height;
  &::before {
    border-radius: 50%;
  }
}

.switch-label {
  vertical-align: top;
  line-height: @toggle-switch-height;
  font-weight: bold;

  .switch {
    margin-bottom: -@slider-height * .45;
    margin-left: @slider-padding * 2;
    margin-right: @slider-padding * 2;
  }
}

.refund-text {
  transition: .4s opacity ease-in-out;
  color: @cc-brand-mid;
}
.hide-refund {
  opacity: 0;
}

.tile {
  padding: 20px 20px 30px;
  display:  block;
  position: relative;
  color: @cc-text;
  border-radius: 5px;
  text-align: center;

  .pricing-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 4px;
    border: 1px solid transparent;
    display: inline-block;
    transition: all .4 ease-in-out;
  }

  .pricing-type-annual {
    background-color: @cc-text;
    color: white !important;
  }

  .pricing-type-monthly {
    color: @cc-text;
    border-color: @cc-text;
  }

  .btn {
    text-transform: uppercase;
    font-weight: bold;
  }

  .btn-current {
    border: 1px solid transparent;
  }

  &:before {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: inherit;
    bottom: 0;
    content: ' ';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    transition: border .4s ease-in-out;
  }

  &:after { // scss-lint:disable PropertyCount
    border: 4px solid @cc-brand-mid;
    border-radius: inherit;
    bottom: 0;
    content: ' ';
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    transition: opacity .4s ease-in-out;
  }

  &:hover,
  &:focus,
  *:hover {
    color: inherit;
    text-decoration: none;
  }
}

.tile:hover:after,
.tile:focus:after {
  opacity: 1;
}


.tile.selected-plan {
  &:before {
    border-width: 8px;
  }
}


.tile h3 {
  text-transform: uppercase;
}

.plan-price {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 0;
  margin-top: 10px;
}

.plan-monthly-label {
  margin-bottom: 20px;
}

._make-color-tile(@_color-tile) {
  h3 {
    color: @_color-tile !important;
  }

  .btn {
    color: @_color-tile !important;
  }

  .btn-current {
    border-color: @_color-tile;
  }

  .pricing-type-monthly {
    border-color: @_color-tile;
    color: @_color-tile !important;
  }

  .pricing-type-annual {
    background-color: @_color-tile;
  }

  &:before,
  &:after {
    border-color: @_color-tile;
  }

  .btn-current {
    color: @_color-tile !important;
  }
}

.tile-standard {
  ._make-color-tile(@cc-att-pos-mid);
}

.tile-pro {
  ._make-color-tile(@cc-light-cool-accent-mid);
}

.tile-advanced {
  ._make-color-tile(@cc-dark-cool-accent-mid);
}

.tile-enterprise {
  ._make-color-tile(@cc-brand-mid);
}

.tile-community {
  ._make-color-tile(@cc-neutral-mid);
}

.select-plan-row {
  margin-bottom: 20px;
  margin-top: 20px;
}

@toggle-switch-height: 34px;
@toggle-switch-width: 60px;
@slider-padding: 4px;
@slider-height: @toggle-switch-height - @slider-padding * 2;

.switch {
  display: inline-block;
  height: @toggle-switch-height;
  position: relative;
  width: @toggle-switch-width;
   input {
    display: none;
  }
 }

.slider {
  background-color: #fafafa;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: .4s;
   &::before {
    background-color: #ffffff;
    bottom: @slider-padding;
    content: "";
    height: @slider-height;
    left: @slider-padding;
    position: absolute;
    transition: .4s;
    width: @slider-height;
  }
}
input:checked + .slider {
  background-color: #004ebc;
}
 input:focus + .slider {
  box-shadow: 0 0 1px #6c7980;
}
 input:checked + .slider:before {
  transform: translateX(@slider-height);
}
 .slider.round {
  border-radius: @toggle-switch-height;
   &::before {
    border-radius: 50%;
  }
}
 .switch-label {
  vertical-align: top;
  line-height: @toggle-switch-height;
  font-weight: bold;
   .switch {
    margin-bottom: -@slider-height * .45;
    margin-left: @slider-padding * 2;
    margin-right: @slider-padding * 2;
  }
}<commit_msg>clean up old styles and add new ones<commit_after>@import '../../hqwebapp/less/_hq/includes/variables.less';
@import '../../hqwebapp/less/_hq/includes/mixins.less';

@toggle-switch-height: 34px;
@toggle-switch-width: 60px;
@slider-padding: 4px;
@slider-height: @toggle-switch-height - @slider-padding * 2;

.switch {
  display: inline-block;
  height: @toggle-switch-height;
  position: relative;
  width: @toggle-switch-width;

  input {
    display: none;
  }
}

.slider {
  background-color: @cc-brand-mid;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: .4s;

  &::before {
    background-color: #ffffff;
    bottom: @slider-padding;
    content: "";
    height: @slider-height;
    left: @slider-padding;
    position: absolute;
    transition: .4s;
    width: @slider-height;
  }
}

input:checked + .slider {
  background-color: @cc-brand-mid;
}

input:focus + .slider {
  box-shadow: 0 0 1px #6c7980;
}

input:checked + .slider:before {
  transform: translateX(@slider-height);
}

.slider.round {
  border-radius: @toggle-switch-height;
  &::before {
    border-radius: 50%;
  }
}

.switch-label {
  vertical-align: top;
  line-height: @toggle-switch-height;
  font-weight: bold;

  .switch {
    margin-bottom: -@slider-height * .45;
    margin-left: @slider-padding * 2;
    margin-right: @slider-padding * 2;
  }
}

.refund-text {
  transition: .4s opacity ease-in-out;
  color: @cc-brand-mid;
}
.hide-refund {
  opacity: 0;
}

.tile {
  padding: 20px 20px 30px;
  display: block;
  position: relative;
  color: @cc-text;
  border-radius: 5px;
  text-align: center;

  .pricing-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 4px;
    border: 1px solid transparent;
    display: inline-block;
    transition: all .4 ease-in-out;
  }

  .pricing-type-annual {
    background-color: @cc-text;
    color: white !important;
  }

  .pricing-type-monthly {
    color: @cc-text;
    border-color: @cc-text;
  }

  .btn {
    text-transform: uppercase;
    font-weight: bold;
  }

  .btn-current {
    border: 1px solid transparent;
  }

  &:before {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: inherit;
    bottom: 0;
    content: ' ';
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    transition: border .4s ease-in-out;
  }

  &:after { // scss-lint:disable PropertyCount
    border: 4px solid @cc-brand-mid;
    border-radius: inherit;
    bottom: 0;
    content: ' ';
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    transition: opacity .4s ease-in-out;
  }

  &:hover,
  &:focus,
  *:hover {
    color: inherit;
    text-decoration: none;
  }
}

.tile:hover:after,
.tile:focus:after {
  opacity: 1;
}


.tile.selected-plan {
  &:before {
    border-width: 8px;
  }
}


.tile h3 {
  text-transform: uppercase;
}

.plan-price {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 0;
  margin-top: 10px;
}

.plan-monthly-label {
  margin-bottom: 20px;
}

._make-color-tile(@_color-tile) {
  h3 {
    color: @_color-tile !important;
  }

  .btn {
    color: @_color-tile !important;
  }

  .btn-current {
    border-color: @_color-tile;
  }

  .pricing-type-monthly {
    border-color: @_color-tile;
    color: @_color-tile !important;
  }

  .pricing-type-annual {
    background-color: @_color-tile;
  }

  &:before,
  &:after {
    border-color: @_color-tile;
  }

  .btn-current {
    color: @_color-tile !important;
  }
}

.tile-standard {
  ._make-color-tile(@cc-att-pos-mid);
}

.tile-pro {
  ._make-color-tile(@cc-light-cool-accent-mid);
}

.tile-advanced {
  ._make-color-tile(@cc-dark-cool-accent-mid);
}

.tile-enterprise {
  ._make-color-tile(@cc-brand-mid);
}

.tile-community {
  ._make-color-tile(@cc-neutral-mid);
}

.select-plan-row {
  margin-bottom: 20px;
  margin-top: 20px;
}

.tile-enterprise {
  ._make-color-tile(@cc-brand-mid);
}

.tile-community {
  ._make-color-tile(@cc-neutral-mid);
}

.select-plan-row {
  margin-bottom: 20px;
  margin-top: 20px;
}
{'fraction_non_alphanumeric': 0.16282543747332479, 'fraction_numerical': 0.020593256508749467, 'mean_word_length': 2.715021799445105, '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': '7588360', 'n_tokens_mistral': 3834, 'n_tokens_neox': 3604, 'n_words': 711}