<commit_before>/* Snippets */
@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin ratio($percent) {
  &:after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: $percent;
  }
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin text-shadow($shadow...) {
  text-shadow: $shadow;
}

@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transition-custom($key, $value) {
  -webkit-transition-#{$key}: $value;
  -moz-transition-#{$key}: $value;
  -ms-transition-#{$key}: $value;
  -o-transition-#{$key}: $value;
  transition-#{$key}: $value;
}

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skew($x, $y);
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
}

@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

@mixin transform($transforms...) {
  -webkit-transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  -o-transform: $transforms;
  transform: $transforms;
}

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
  -moz-background-clip: $clip;
  background-clip: $clip;
}

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

@mixin linear-gradient($color1, $color2, $start: 0%, $end: 100%) {
  background-color: $color2;
  background-image: -moz-linear-gradient(top, $color1 $start, $color2 $end); /* FF3.6+ */
  background-image: -webkit-linear-gradient(top, $color1 $start, $color2 $end); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, $color1 $start, $color2 $end); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, $color1 $start, $color2 $end); /* IE10+ */
  background-image: linear-gradient(to bottom, $color1 $start, $color2 $end); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie-hex-str($color1)}', endColorstr='#{ie-hex-str($color2)}',GradientType=0 ); /* IE6-9 */
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}

@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -o-user-select: $select;
  user-select: $select;
}

@mixin triangle($direction: 'up', $size: 6px, $color: #333) {
  @if type-of($direction) != "string" {
    @warn "`#{$direction}` should be a string for `triangle` mixin.";
  } @else {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: '';
    @if ($direction == 'up') {
      border-bottom: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'down') {
      border-top: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'left') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-right: $size solid $color;
    } @else if ($direction == 'right') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-left: $size solid $color;
    }
  }
}

@mixin font-face($font-family, $file-path, $font-weight: normal, $font-style: normal) {
  @font-face {
    font-family: $font-family;
    font-weight: $font-weight;
    font-style: $font-style;
    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
      url('#{$file-path}.woff') format('woff'),
      url('#{$file-path}.ttf') format('truetype'),
      url('#{$file-path}.svg##{$font-family}') format('svg');
  }
}

@mixin image-2x($image, $size) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);<commit_msg>Adding mixin for other shapes.<commit_after>/* Snippets */
@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

@mixin ratio($percent) {
  &:after {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: $percent;
  }
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin text-shadow($shadow...) {
  text-shadow: $shadow;
}

@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transition-custom($key, $value) {
  -webkit-transition-#{$key}: $value;
  -moz-transition-#{$key}: $value;
  -ms-transition-#{$key}: $value;
  -o-transition-#{$key}: $value;
  transition-#{$key}: $value;
}

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
  -moz-transform: scale($ratio);
  -ms-transform: scale($ratio);
  -o-transform: scale($ratio);
  transform: scale($ratio);
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
  -moz-transform: skew($x, $y);
  -ms-transform: skew($x, $y);
  -o-transform: skew($x, $y);
  transform: skew($x, $y);
}

@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
  -moz-transform: translate3d($x, $y, $z);
  -ms-transform: translate3d($x, $y, $z);
  -o-transform: translate3d($x, $y, $z);
  transform: translate3d($x, $y, $z);
}

@mixin transform($transforms...) {
  -webkit-transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  -o-transform: $transforms;
  transform: $transforms;
}

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
  -moz-background-clip: $clip;
  background-clip: $clip;
}

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

@mixin linear-gradient($color1, $color2, $start: 0%, $end: 100%) {
  background-color: $color2;
  background-image: -moz-linear-gradient(top, $color1 $start, $color2 $end); /* FF3.6+ */
  background-image: -webkit-linear-gradient(top, $color1 $start, $color2 $end); /* Chrome10+,Safari5.1+ */
  background-image: -o-linear-gradient(top, $color1 $start, $color2 $end); /* Opera 11.10+ */
  background-image: -ms-linear-gradient(top, $color1 $start, $color2 $end); /* IE10+ */
  background-image: linear-gradient(to bottom, $color1 $start, $color2 $end); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie-hex-str($color1)}', endColorstr='#{ie-hex-str($color2)}',GradientType=0 ); /* IE6-9 */
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}

@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -o-user-select: $select;
  user-select: $select;
}

@mixin triangle($direction: 'up', $size: 6px, $color: #333) {
  @if type-of($direction) != "string" {
    @warn "`#{$direction}` should be a string for `triangle` mixin.";
  } @else {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    content: '';
    @if ($direction == 'up') {
      border-bottom: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'down') {
      border-top: $size solid $color;
      border-left: 1/2*$size solid transparent;
      border-right: 1/2*$size solid transparent;
    } @else if ($direction == 'left') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-right: $size solid $color;
    } @else if ($direction == 'right') {
      border-top: 1/2*$size solid transparent;
      border-bottom: 1/2*$size solid transparent;
      border-left: $size solid $color;
    }
  }
}

@mixin circle($size) {
  border-radius: 50%;
  height: auto;
  padding-bottom: 0% + $size;
  width: 0% + $size;
}

@mixin square($size) {
  height: auto;
  padding-bottom: 0% + $size;
  width: 0% + $size;
}

@mixin rectangle($size) {
  height: 0;
  padding-bottom: 0% + $size / 3 *2;
  width: 0% + $size;
}

@mixin font-face($font-family, $file-path, $font-weight: normal, $font-style: normal) {
  @font-face {
    font-family: $font-family;
    font-weight: $font-weight;
    font-style: $font-style;
    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
      url('#{$file-path}.woff') format('woff'),
      url('#{$file-path}.ttf') format('truetype'),
      url('#{$file-path}.svg##{$font-family}') format('svg');
  }
}

@mixin image-2x($image, $size) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
{'fraction_non_alphanumeric': 0.20565377060380904, 'fraction_numerical': 0.017678708685626442, 'mean_word_length': 3.6376237623762377, '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': '1941067', 'n_tokens_mistral': 4551, 'n_tokens_neox': 4345, 'n_words': 883}