<commit_before>@import 'cursors';

/* =Helpers
-----------------------------------------------------------------------------*/

// Layout Helpers

.full-screen,
%full-screen {
  @include square;

  position: relative;
}

.fixed,
%fixed {
  position: fixed;
}

.absolute,
%absolute {
  position: absolute;
}

.relative,
%relative {
  position: relative;
}

.last,
%last {
  margin-right: 0 !important;
}

.pause,
%pause {
  margin-bottom: $base-line / 2 !important;
}

.end,
%end {
  margin-bottom: 0 !important;
}

.margin-top,
.top-margin,
%margin-top,
.top-margin {
  margin-top: $margin;
}

.top-margin--extra,
.margin-top--extra,
%top-margin--extra,
%margin-top--extra {
  margin-top: $margin * 2;
}

.right-margin,
.margin-right,
%right-margin,
%margin-right {
  margin-right: $margin;
}

.right-margin--extra,
.margin-right--extra,
%right-margin--extra,
%margin-right--extra {
  margin-right: $margin * 2;
}

.bottom-margin,
.margin-bottom,
%bottom-margin,
%margin-bottom {
  margin-bottom: $margin;
}

.bottom-margin--extra,
.margin-bottom--extra,
%bottom-margin--extra,
%margin-bottom--extra {
  margin-bottom: $margin * 2;
}

.left-margin,
.margin-left,
%left-margin,
%margin-left {
  margin-left: $margin;
}

.left-margin--extra,
.margin-left--extra,
%left-margin--extra,
%margin-left--extra {
  margin-left: $margin * 2;
}

.no-margin,
%no-margin {
  margin: 0 !important;
}

.no-top-margin,
%no-top-margin {
  margin-top: 0 !important;
}

.no-right-margin,
%no-right-margin {
  margin-right: 0 !important;
}

.no-bottom-margin,
%no-bottom-margin {
  margin-bottom: 0 !important;
}

.no-left-margin,
%no-left-margin {
  margin-left: 0 !important;
}

.no-spacing,
%no-spacing {
  margin: 0 !important;
  padding: 0 !important;
}

.no-padding,
%no-padding {
  padding: 0 !important;
}

.no-top-padding,
%no-top-padding {
  padding: 0 !important;
}

.no-right-padding,
%no-right-padding {
  padding: 0 !important;
}

.no-bottom-padding,
%no-bottom-padding {
  padding: 0 !important;
}

.no-left-padding,
%no-left-padding {
  padding: 0 !important;
}

.padding-top,
.top-padding,
%padding-top,
%top-padding {
  padding-top: $padding;
}

.padding-right,
.right-padding,
%padding-right,
%right-padding {
  padding-right: $padding;
}

.padding-bottom,
.bottom-padding,
%padding-bottom,
%bottom-padding {
  padding-bottom: $padding;
}

.padding-left,
.left-padding,
%padding-left,
%left-padding {
  padding-left: $padding * 2;
}

.padding-top--extra,
.top-padding--extra,
%padding-top--extra,
%top-padding--extra {
  padding-top: $padding * 2;
}

.padding-right--extra,
.right-padding--extra,
%padding-right--extra,
%right-padding--extra {
  padding-right: $padding * 2;
}

.padding-bottom--extra,
.bottom-padding--extra,
%padding-bottom--extra,
%bottom-padding--extra {
  padding-bottom: $padding * 2;
}

.padding-left--extra,
.left-padding--extra,
%padding-left--extra,
%left-padding--extra {
  padding-left: $padding * 2;
}

.border-top,
%border-top {
  border-top: 1px solid $border-color;
}

.border-right,
%border-right {
  border-right: 1px solid $border-color;
}

.border-bottom,
%border-bottom {
  border-bottom: 1px solid $border-color;
}

.border-left,
%border-left {
  border-left: 1px solid $border-color;
}

.border,
%border {
  bottom: 1px solid $border-color;
}

.border-top--thick,
%border-top--thick {
  border-top: 3px solid $border-color;
}

.border-right--thick,
%border-right--thick {
  border-right: 1px solid $border-color;
}

.border-bottom--thick,
%border-bottom--thick {
  border-bottom: 1px solid $border-color;
}

.border-left--thick,
%border-left--thick {
  border-left: 1px solid $border-color;
}

.border--thick,
%border--thick {
  bottom: 1px solid $border-color;
}

.no-border-top,
%no-border-top {
  border-top: 0 none !important;
}

.no-border-right,
%no-border-right {
  border-right: 1px solid $border-color;
}

.no-border-bottom,
%no-border-bottom {
  border-bottom: 1px solid $border-color;
}

.no-border-left,
%no-border-left {
  border-left: 1px solid $border-color;
}

.no-border,
%no-border {
  bottom: 1px solid $border-color;
}

.width-100,
%width-100 { width: 100%;  }
.width-90,
%width-90  { width: 90%;   }
.width-80,
%width-80  { width: 80%;   }
.width-75,
%width-75  { width: 75%;   }
.width-70,
%width-70  { width: 70%;   }
.width-66,
%width-66  { width: 66.6%; }
.width-65,
%width-65  { width: 65%;   }
.width-60,
%width-60  { width: 60%;   }
.width-50,
%width-50  { width: 50%;   }
.width-40,
%width-40  { width: 40%;   }
.width-35,
%width-35  { width: 35%;   }
.width-33,
%width-33  { width: 33.3%; }
.width-30,
%width-30  { width: 30%;   }
.width-25,
%width-25  { width: 25%;   }
.width-20,
%width-20  { width: 20%;   }
.width-10,
%width-10  { width: 10%;   }

@media (max-width: $breakpoint-tablet) {
  .tablet-width-100,
  %tablet-width-100 { width: 100%;  }
  .tablet-width-90,
  %tablet-width-90  { width: 90%;   }
  .tablet-width-80,
  %tablet-width-80  { width: 80%;   }
  .tablet-width-75,
  %tablet-width-75  { width: 75%;   }
  .tablet-width-70,
  %tablet-width-70  { width: 70%;   }
  .tablet-width-66,
  %tablet-width-66  { width: 66.6%; }
  .tablet-width-65,
  %tablet-width-65  { width: 65%;   }
  .tablet-width-60,
  %tablet-width-60  { width: 60%;   }
  .tablet-width-50,
  %tablet-width-50  { width: 50%;   }
  .tablet-width-40,
  %tablet-width-40  { width: 40%;   }
  .tablet-width-35,
  %tablet-width-35  { width: 35%;   }
  .tablet-width-33,
  %tablet-width-33  { width: 33.3%; }
  .tablet-width-30,
  %tablet-width-30  { width: 30%;   }
  .tablet-width-25,
  %tablet-width-25  { width: 25%;   }
  .tablet-width-20,
  %tablet-width-20  { width: 20%;   }
  .tablet-width-10,
  %tablet-width-10  { width: 10%;   }
}

@media (max-width: $breakpoint-large-phone) {
  .large-phone-width-100,
  %large-phone-width-100 { width: 100%;  }
  .large-phone-width-90,
  %large-phone-width-90  { width: 90%;   }
  .large-phone-width-80,
  %large-phone-width-80  { width: 80%;   }
  .large-phone-width-75,
  %large-phone-width-75  { width: 75%;   }
  .large-phone-width-70,
  %large-phone-width-70  { width: 70%;   }
  .large-phone-width-66,
  %large-phone-width-66  { width: 66.6%; }
  .large-phone-width-65,
  %large-phone-width-65  { width: 65%;   }
  .large-phone-width-60,
  %large-phone-width-60  { width: 60%;   }
  .large-phone-width-50,
  %large-phone-width-50  { width: 50%;   }
  .large-phone-width-40,
  %large-phone-width-40  { width: 40%;   }
  .large-phone-width-35,
  %large-phone-width-35  { width: 35%;   }
  .large-phone-width-33,
  %large-phone-width-33  { width: 33.3%; }
  .large-phone-width-30,
  %large-phone-width-30  { width: 30%;   }
  .large-phone-width-25,
  %large-phone-width-25  { width: 25%;   }
  .large-phone-width-20,
  %large-phone-width-20  { width: 20%;   }
  .large-phone-width-10,
  %large-phone-width-10  { width: 10%;   }
}

@media (max-width: $breakpoint-phone) {
  .phone-width-100,
  %phone-width-100 { width: 100%;  }
  .phone-width-90,
  %phone-width-90  { width: 90%;   }
  .phone-width-80,
  %phone-width-80  { width: 80%;   }
  .phone-width-75,
  %phone-width-75  { width: 75%;   }
  .phone-width-70,
  %phone-width-70  { width: 70%;   }
  .phone-width-66,
  %phone-width-66  { width: 66.6%; }
  .phone-width-65,
  %phone-width-65  { width: 65%;   }
  .phone-width-60,
  %phone-width-60  { width: 60%;   }
  .phone-width-50,
  %phone-width-50  { width: 50%;   }
  .phone-width-40,
  %phone-width-40  { width: 40%;   }
  .phone-width-35,
  %phone-width-35  { width: 35%;   }
  .phone-width-33,
  %phone-width-33  { width: 33.3%; }
  .phone-width-30,
  %phone-width-30  { width: 30%;   }
  .phone-width-25,
  %phone-width-25  { width: 25%;   }
  .phone-width-20,
  %phone-width-20  { width: 20%;   }
  .phone-width-10,
  %phone-width-10  { width: 10%;   }
}

.height-100,
%height-100 { height: 100%;  }
.height-90,
%height-90  { height: 90%;   }
.height-80,
%height-80  { height: 80%;   }
.height-75,
%height-75  { height: 75%;   }
.height-70,
%height-70  { height: 70%;   }
.height-66,
%height-66  { height: 66.6%; }
.height-65,
%height-65  { height: 65%;   }
.height-60,
%height-60  { height: 60%;   }
.height-50,
%height-50  { height: 50%;   }
.height-40,
%height-40  { height: 40%;   }
.height-35,
%height-35  { height: 35%;   }
.height-33,
%height-33  { height: 33.3%; }
.height-30,
%height-30  { height: 30%;   }
.height-25,
%height-25  { height: 25%;   }
.height-20,
%height-20  { height: 20%;   }
.height-10,
%height-10  { height: 10%;   }

// UI Helpers

.group,
%group,
.clearfix,
%clearfix {
  @include clearfix;
}

.border-box {
  box-sizing: border-box;
}

.hide,
%hide {
  display: none;
}

.hide-on-desktop,
%hide-on-desktop {
  display: none;
}

.flat-list,
%flat-list {
  margin-left: 0;
  list-style: none;
}

.circle,
%circle {
  border-radius: 100%;
}

.border-radius,
%border-radius {
  border-radius: $border-radius;
}

// UX Helpers

.req,
.required,
%required {
  font-weight: normal;
  color: $color-red;
}

.error,
%error {
  color: $color-red;
}

.success,
%success {
  color: $color-green;
}

.spinning,
%spinning {
  @include spinning(.75s);

  display: inline-block;
}

.fade-in,
%fade-in {
  @include fadeIn;
}

.code,
%code {
  border: 1px solid $color-gray-light;
  border-radius: $border-radius;
  display: inline-block;
  font-size: .8rem;
  font-family: $font-family-code;
  padding: .05rem .35rem;
}

// Typography

.big,
%big {
  font-size: $font-size-big;
}

.small,
%small {
  font-size: $font-size-small;
}

.smaller,
%smaller {
  font-size: $font-size-smaller;
}

.highlight,
%highlight {
  background-color: $color-yellow-pastel;
}

.sans,
%sans {
  font-family: $font-family-base;
}

.serif,
%serif {
  font-family: $font-family-serif;
}

.mono,
%mono {
  font-family: $font-family-mono;
}

.nowrap,
%nowrap,
.nowrap td {
  white-space: nowrap;
}

.text-centered,
.text-center,
%text-centered{
  text-align: center;
}

.text-right,
%text-right {
  text-align: right;
}

.text-left,
%text-left {
  text-align: left;
}

.hide-text,
%hide-text {
  text-indent: -5000px;
  font-size: 0;
}

.normal,
%normal {
  font-weight: normal;
}

.light,
%light {
  // scss-lint:disable ImportantRule
  font-weight: 300 !important;
}

.bold,
%bold {
  // scss-lint:disable ImportantRule
  font-weight: bold !important;
}

.medium,
%medium {
  // scss-lint:disable ImportantRule
  font-weight: 400 !important;
}

.italic,
%italic {
  font-style: italic;
}

.uppercase,
%uppercase,
.capitalized,
%capitalized {
  text-transform: uppercase;
}

// Color Helpers

.background-white {
  background-color: $color-white;
}

.background-black {
  background-color: $color-black;
}

.color-black,
%color-black {
  color: $color-black;
}

.color-white,
%color-white {
  color: $color-white;
}

.color-gray-10,
%color-gray-10 { color: rgba(0, 0, 0, .1); }
.color-gray-20,
%color-gray-20 { color: rgba(0, 0, 0, .2); }
.color-gray-30,
%color-gray-30 { color: rgba(0, 0, 0, .3); }
.color-gray-40,
%color-gray-40 { color: rgba(0, 0, 0, .4); }
.color-gray-50,
%color-gray-50 { color: rgba(0, 0, 0, .5); }
.color-gray-60,
%color-gray-60 { color: rgba(0, 0, 0, .6); }
.color-gray-70,
%color-gray-70 { color: rgba(0, 0, 0, .7); }
.color-gray-80,
%color-gray-80 { color: rgba(0, 0, 0, .8); }
.color-gray-90,
%color-gray-90 { color: rgba(0, 0, 0, .9); }

.color-white-10,
%color-white-10 { color: rgba(255, 255, 255, .1); }
.color-white-20,
%color-white-20 { color: rgba(255, 255, 255, .2); }
.color-white-30,
%color-white-30 { color: rgba(255, 255, 255, .3); }
.color-white-40,
%color-white-40 { color: rgba(255, 255, 255, .4); }
.color-white-50,
%color-white-50 { color: rgba(255, 255, 255, .5); }
.color-white-60,
%color-white-60 { color: rgba(255, 255, 255, .6); }
.color-white-70,
%color-white-70 { color: rgba(255, 255, 255, .7); }
.color-white-80,
%color-white-80 { color: rgba(255, 255, 255, .8); }
.color-white-90,
%color-white-90 { color: rgba(255, 255, 255, .9); }

/* =Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .left,
  %left,
  .right,
  %right {
    float: none;
  }
  .hide-on-mobile,
  %hide-on-mobile {
    display: none;
  }
  .hide-on-desktop,
  %hide-on-desktop {
    display: block;
  }
}
<commit_msg>added display helpers<commit_after>@import 'cursors';

/* =Helpers
-----------------------------------------------------------------------------*/

// Layout Helpers
// Positioning

.full-screen,
%full-screen {
  @include square;

  position: relative;
}

.fixed,
%fixed {
  position: fixed;
}

.absolute,
%absolute {
  position: absolute;
}

.relative,
%relative {
  position: relative;
}

// Display

.display-flex,
%display-flex {
  display: flex;
}

.display-block,
%display-block {
  display: block;
}

.display-inline-block,
%display-inline-block {
  display: inline-block;
}

.display-table,
%display-table {
  display: table;
}

.display-inline-table,
%display-inline-table {
  display: inline-table;
}

.display-table-cell,
%display-table-cell {
  display: table-cell;
}

.display-list-item,
%display-list-item {
  display: list-item;
}

.display-grid,
%display-grid {
  display: grid;
}

.display-inline-grid,
%display-inline-grid {
  display: inline-grid;
}

.display-subgrid,
%display-subgrid {
  display: subgrid;
}

.display-none,
%display-none {
  display: none;
}

// Spacing

.last,
%last {
  margin-right: 0 !important;
}

.pause,
%pause {
  margin-bottom: $base-line / 2 !important;
}

.end,
%end {
  margin-bottom: 0 !important;
}

.margin-top,
.top-margin,
%margin-top,
.top-margin {
  margin-top: $margin;
}

.top-margin--extra,
.margin-top--extra,
%top-margin--extra,
%margin-top--extra {
  margin-top: $margin * 2;
}

.right-margin,
.margin-right,
%right-margin,
%margin-right {
  margin-right: $margin;
}

.right-margin--extra,
.margin-right--extra,
%right-margin--extra,
%margin-right--extra {
  margin-right: $margin * 2;
}

.bottom-margin,
.margin-bottom,
%bottom-margin,
%margin-bottom {
  margin-bottom: $margin;
}

.bottom-margin--extra,
.margin-bottom--extra,
%bottom-margin--extra,
%margin-bottom--extra {
  margin-bottom: $margin * 2;
}

.left-margin,
.margin-left,
%left-margin,
%margin-left {
  margin-left: $margin;
}

.left-margin--extra,
.margin-left--extra,
%left-margin--extra,
%margin-left--extra {
  margin-left: $margin * 2;
}

.no-margin,
%no-margin {
  margin: 0 !important;
}

.no-top-margin,
%no-top-margin {
  margin-top: 0 !important;
}

.no-right-margin,
%no-right-margin {
  margin-right: 0 !important;
}

.no-bottom-margin,
%no-bottom-margin {
  margin-bottom: 0 !important;
}

.no-left-margin,
%no-left-margin {
  margin-left: 0 !important;
}

.no-spacing,
%no-spacing {
  margin: 0 !important;
  padding: 0 !important;
}

.no-padding,
%no-padding {
  padding: 0 !important;
}

.no-top-padding,
%no-top-padding {
  padding: 0 !important;
}

.no-right-padding,
%no-right-padding {
  padding: 0 !important;
}

.no-bottom-padding,
%no-bottom-padding {
  padding: 0 !important;
}

.no-left-padding,
%no-left-padding {
  padding: 0 !important;
}

.padding-top,
.top-padding,
%padding-top,
%top-padding {
  padding-top: $padding;
}

.padding-right,
.right-padding,
%padding-right,
%right-padding {
  padding-right: $padding;
}

.padding-bottom,
.bottom-padding,
%padding-bottom,
%bottom-padding {
  padding-bottom: $padding;
}

.padding-left,
.left-padding,
%padding-left,
%left-padding {
  padding-left: $padding * 2;
}

.padding-top--extra,
.top-padding--extra,
%padding-top--extra,
%top-padding--extra {
  padding-top: $padding * 2;
}

.padding-right--extra,
.right-padding--extra,
%padding-right--extra,
%right-padding--extra {
  padding-right: $padding * 2;
}

.padding-bottom--extra,
.bottom-padding--extra,
%padding-bottom--extra,
%bottom-padding--extra {
  padding-bottom: $padding * 2;
}

.padding-left--extra,
.left-padding--extra,
%padding-left--extra,
%left-padding--extra {
  padding-left: $padding * 2;
}

.border-top,
%border-top {
  border-top: 1px solid $border-color;
}

.border-right,
%border-right {
  border-right: 1px solid $border-color;
}

.border-bottom,
%border-bottom {
  border-bottom: 1px solid $border-color;
}

.border-left,
%border-left {
  border-left: 1px solid $border-color;
}

.border,
%border {
  bottom: 1px solid $border-color;
}

.border-top--thick,
%border-top--thick {
  border-top: 3px solid $border-color;
}

.border-right--thick,
%border-right--thick {
  border-right: 1px solid $border-color;
}

.border-bottom--thick,
%border-bottom--thick {
  border-bottom: 1px solid $border-color;
}

.border-left--thick,
%border-left--thick {
  border-left: 1px solid $border-color;
}

.border--thick,
%border--thick {
  bottom: 1px solid $border-color;
}

.no-border-top,
%no-border-top {
  border-top: 0 none !important;
}

.no-border-right,
%no-border-right {
  border-right: 1px solid $border-color;
}

.no-border-bottom,
%no-border-bottom {
  border-bottom: 1px solid $border-color;
}

.no-border-left,
%no-border-left {
  border-left: 1px solid $border-color;
}

.no-border,
%no-border {
  bottom: 1px solid $border-color;
}

.width-100,
%width-100 { width: 100%;  }
.width-90,
%width-90  { width: 90%;   }
.width-80,
%width-80  { width: 80%;   }
.width-75,
%width-75  { width: 75%;   }
.width-70,
%width-70  { width: 70%;   }
.width-66,
%width-66  { width: 66.6%; }
.width-65,
%width-65  { width: 65%;   }
.width-60,
%width-60  { width: 60%;   }
.width-50,
%width-50  { width: 50%;   }
.width-40,
%width-40  { width: 40%;   }
.width-35,
%width-35  { width: 35%;   }
.width-33,
%width-33  { width: 33.3%; }
.width-30,
%width-30  { width: 30%;   }
.width-25,
%width-25  { width: 25%;   }
.width-20,
%width-20  { width: 20%;   }
.width-10,
%width-10  { width: 10%;   }

@media (max-width: $breakpoint-tablet) {
  .tablet-width-100,
  %tablet-width-100 { width: 100%;  }
  .tablet-width-90,
  %tablet-width-90  { width: 90%;   }
  .tablet-width-80,
  %tablet-width-80  { width: 80%;   }
  .tablet-width-75,
  %tablet-width-75  { width: 75%;   }
  .tablet-width-70,
  %tablet-width-70  { width: 70%;   }
  .tablet-width-66,
  %tablet-width-66  { width: 66.6%; }
  .tablet-width-65,
  %tablet-width-65  { width: 65%;   }
  .tablet-width-60,
  %tablet-width-60  { width: 60%;   }
  .tablet-width-50,
  %tablet-width-50  { width: 50%;   }
  .tablet-width-40,
  %tablet-width-40  { width: 40%;   }
  .tablet-width-35,
  %tablet-width-35  { width: 35%;   }
  .tablet-width-33,
  %tablet-width-33  { width: 33.3%; }
  .tablet-width-30,
  %tablet-width-30  { width: 30%;   }
  .tablet-width-25,
  %tablet-width-25  { width: 25%;   }
  .tablet-width-20,
  %tablet-width-20  { width: 20%;   }
  .tablet-width-10,
  %tablet-width-10  { width: 10%;   }
}

@media (max-width: $breakpoint-large-phone) {
  .large-phone-width-100,
  %large-phone-width-100 { width: 100%;  }
  .large-phone-width-90,
  %large-phone-width-90  { width: 90%;   }
  .large-phone-width-80,
  %large-phone-width-80  { width: 80%;   }
  .large-phone-width-75,
  %large-phone-width-75  { width: 75%;   }
  .large-phone-width-70,
  %large-phone-width-70  { width: 70%;   }
  .large-phone-width-66,
  %large-phone-width-66  { width: 66.6%; }
  .large-phone-width-65,
  %large-phone-width-65  { width: 65%;   }
  .large-phone-width-60,
  %large-phone-width-60  { width: 60%;   }
  .large-phone-width-50,
  %large-phone-width-50  { width: 50%;   }
  .large-phone-width-40,
  %large-phone-width-40  { width: 40%;   }
  .large-phone-width-35,
  %large-phone-width-35  { width: 35%;   }
  .large-phone-width-33,
  %large-phone-width-33  { width: 33.3%; }
  .large-phone-width-30,
  %large-phone-width-30  { width: 30%;   }
  .large-phone-width-25,
  %large-phone-width-25  { width: 25%;   }
  .large-phone-width-20,
  %large-phone-width-20  { width: 20%;   }
  .large-phone-width-10,
  %large-phone-width-10  { width: 10%;   }
}

@media (max-width: $breakpoint-phone) {
  .phone-width-100,
  %phone-width-100 { width: 100%;  }
  .phone-width-90,
  %phone-width-90  { width: 90%;   }
  .phone-width-80,
  %phone-width-80  { width: 80%;   }
  .phone-width-75,
  %phone-width-75  { width: 75%;   }
  .phone-width-70,
  %phone-width-70  { width: 70%;   }
  .phone-width-66,
  %phone-width-66  { width: 66.6%; }
  .phone-width-65,
  %phone-width-65  { width: 65%;   }
  .phone-width-60,
  %phone-width-60  { width: 60%;   }
  .phone-width-50,
  %phone-width-50  { width: 50%;   }
  .phone-width-40,
  %phone-width-40  { width: 40%;   }
  .phone-width-35,
  %phone-width-35  { width: 35%;   }
  .phone-width-33,
  %phone-width-33  { width: 33.3%; }
  .phone-width-30,
  %phone-width-30  { width: 30%;   }
  .phone-width-25,
  %phone-width-25  { width: 25%;   }
  .phone-width-20,
  %phone-width-20  { width: 20%;   }
  .phone-width-10,
  %phone-width-10  { width: 10%;   }
}

.height-100,
%height-100 { height: 100%;  }
.height-90,
%height-90  { height: 90%;   }
.height-80,
%height-80  { height: 80%;   }
.height-75,
%height-75  { height: 75%;   }
.height-70,
%height-70  { height: 70%;   }
.height-66,
%height-66  { height: 66.6%; }
.height-65,
%height-65  { height: 65%;   }
.height-60,
%height-60  { height: 60%;   }
.height-50,
%height-50  { height: 50%;   }
.height-40,
%height-40  { height: 40%;   }
.height-35,
%height-35  { height: 35%;   }
.height-33,
%height-33  { height: 33.3%; }
.height-30,
%height-30  { height: 30%;   }
.height-25,
%height-25  { height: 25%;   }
.height-20,
%height-20  { height: 20%;   }
.height-10,
%height-10  { height: 10%;   }

// UI Helpers

.group,
%group,
.clearfix,
%clearfix {
  @include clearfix;
}

.border-box {
  box-sizing: border-box;
}

.hide,
%hide {
  display: none;
}

.hide-on-desktop,
%hide-on-desktop {
  display: none;
}

.flat-list,
%flat-list {
  margin-left: 0;
  list-style: none;
}

.circle,
%circle {
  border-radius: 100%;
}

.border-radius,
%border-radius {
  border-radius: $border-radius;
}

// UX Helpers

.req,
.required,
%required {
  font-weight: normal;
  color: $color-red;
}

.error,
%error {
  color: $color-red;
}

.success,
%success {
  color: $color-green;
}

.spinning,
%spinning {
  @include spinning(.75s);

  display: inline-block;
}

.fade-in,
%fade-in {
  @include fadeIn;
}

.code,
%code {
  border: 1px solid $color-gray-light;
  border-radius: $border-radius;
  display: inline-block;
  font-size: .8rem;
  font-family: $font-family-code;
  padding: .05rem .35rem;
}

// Typography

.big,
%big {
  font-size: $font-size-big;
}

.small,
%small {
  font-size: $font-size-small;
}

.smaller,
%smaller {
  font-size: $font-size-smaller;
}

.highlight,
%highlight {
  background-color: $color-yellow-pastel;
}

.sans,
%sans {
  font-family: $font-family-base;
}

.serif,
%serif {
  font-family: $font-family-serif;
}

.mono,
%mono {
  font-family: $font-family-mono;
}

.nowrap,
%nowrap,
.nowrap td {
  white-space: nowrap;
}

.text-centered,
.text-center,
%text-centered{
  text-align: center;
}

.text-right,
%text-right {
  text-align: right;
}

.text-left,
%text-left {
  text-align: left;
}

.hide-text,
%hide-text {
  text-indent: -5000px;
  font-size: 0;
}

.normal,
%normal {
  font-weight: normal;
}

.light,
%light {
  // scss-lint:disable ImportantRule
  font-weight: 300 !important;
}

.bold,
%bold {
  // scss-lint:disable ImportantRule
  font-weight: bold !important;
}

.medium,
%medium {
  // scss-lint:disable ImportantRule
  font-weight: 400 !important;
}

.italic,
%italic {
  font-style: italic;
}

.uppercase,
%uppercase,
.capitalized,
%capitalized {
  text-transform: uppercase;
}

// Color Helpers

.background-white {
  background-color: $color-white;
}

.background-black {
  background-color: $color-black;
}

.color-black,
%color-black {
  color: $color-black;
}

.color-white,
%color-white {
  color: $color-white;
}

.color-gray-10,
%color-gray-10 { color: rgba(0, 0, 0, .1); }
.color-gray-20,
%color-gray-20 { color: rgba(0, 0, 0, .2); }
.color-gray-30,
%color-gray-30 { color: rgba(0, 0, 0, .3); }
.color-gray-40,
%color-gray-40 { color: rgba(0, 0, 0, .4); }
.color-gray-50,
%color-gray-50 { color: rgba(0, 0, 0, .5); }
.color-gray-60,
%color-gray-60 { color: rgba(0, 0, 0, .6); }
.color-gray-70,
%color-gray-70 { color: rgba(0, 0, 0, .7); }
.color-gray-80,
%color-gray-80 { color: rgba(0, 0, 0, .8); }
.color-gray-90,
%color-gray-90 { color: rgba(0, 0, 0, .9); }

.color-white-10,
%color-white-10 { color: rgba(255, 255, 255, .1); }
.color-white-20,
%color-white-20 { color: rgba(255, 255, 255, .2); }
.color-white-30,
%color-white-30 { color: rgba(255, 255, 255, .3); }
.color-white-40,
%color-white-40 { color: rgba(255, 255, 255, .4); }
.color-white-50,
%color-white-50 { color: rgba(255, 255, 255, .5); }
.color-white-60,
%color-white-60 { color: rgba(255, 255, 255, .6); }
.color-white-70,
%color-white-70 { color: rgba(255, 255, 255, .7); }
.color-white-80,
%color-white-80 { color: rgba(255, 255, 255, .8); }
.color-white-90,
%color-white-90 { color: rgba(255, 255, 255, .9); }

/* =Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .left,
  %left,
  .right,
  %right {
    float: none;
  }
  .hide-on-mobile,
  %hide-on-mobile {
    display: none;
  }
  .hide-on-desktop,
  %hide-on-desktop {
    display: block;
  }
}

{'fraction_non_alphanumeric': 0.21361381226433815, 'fraction_numerical': 0.060964477078785474, 'mean_word_length': 2.7991556091676717, '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': '4420185', 'n_tokens_mistral': 11803, 'n_tokens_neox': 10622, 'n_words': 1949}