.text-white
{
  color: $white;
}

.bold
{
  font-weight: bold;
}

.light
{
  font-weight: 300;
}

.heavy
{
  font-weight: 900;
}

.normal
{
  font-weight: normal;
}

.uppercase
{
  text-transform: uppercase;
}

.lowercase
{
  text-transform: lowercase;
}

.firstcase:first-letter
{
  text-transform: capitalize !important;
}

.italic
{
  font-style: italic;
}

.underline
{
  text-decoration: underline;
}

.hover\:underline:hover
{
  text-decoration: underline;
}

.strikethrough
{
  text-decoration: line-through;
}

.no-underline
{
  text-decoration: none;
}

.text-nowarp
{
  white-space: nowrap;
}

.ellipsis
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:not([class^="h-"]):not([class*=" h-"])
  {
    height: 1.06em;
  }
}

.colon:after
{
  content: ':';
  display: inline-block;
  margin-right: 0.3em;
}

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

.text-center {
  text-align: center;
}

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

.text-justify {
  text-align: justify;
}

h1,
.h1
{
  margin: 1.5em 0;
  font-size: 3em;
}

h2,
.h2
{
  margin: 1.2em 0;
  font-size: 1.5em;
}

h3,
.h3
{
  margin: 1em 0;
  font-size: 1em;
  color: $yellow;
  text-transform: uppercase;
}

.text-black,
.hover\:text-black:hover
{
  color: $black;
}

.text-black-light,
.hover\:text-black-light:hover
{
  color: $black-light;
}

.text-white,
.hover\:text-white:hover
{
  color: $white;
}

.text-gray,
.hover\:text-gray:hover
{
  color: $gray;
}

.text-gray-light,
.hover\:text-gray-light:hover
{
  color: $gray-light;
}

.text-gray-dark
{
  color: $gray-dark;
}

.text-green
{
  color: $green;
}
.text-yellow
{
  color: $yellow;
}
.text-red
{
  color: $red;
}
.text-blue
{
  color: $blue;
}
.text-blue-dark
{
  color: $blue-dark;
}

.text-yellow-light
{
  color: $yellow-light;
}

.highlight-red
{
  display: inline-block;
  background-color: $red;
  color: white;
  @extend .px-1\/2;
}

.text-xxs {
  font-size: 0.5em;
}

.text-xs {
  font-size: 0.75em;
}

.text-s {
  font-size: 0.875em;
}

.text-m {
  font-size: 1.25em;
}

.text-l {
  font-size: 1.5em;
}

.text-xl {
  font-size: 1.75em;
}

.text-xxl {
  font-size: 2em;
}

.text-line-s
{
  line-height: 1.1em;
}

.text-line-m
{
  line-height: 1.25em;
}

.text-line-l
{
  line-height: 1.5em;
}

.text-line-xl
{
  line-height: 1.75em;
}

.text-line-xxl
{
  line-height: 2em;
}

.text-line-0
{
  line-height: 0;
}

.text-shadow
{
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}

.text-shadow-2
{
  text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}

.content-dropHere
{
  visibility: hidden;
  text-indent: -9999px;
  line-height: 0;

  &::after
  {
    content: 'Drop here!';
    visibility: visible;
    display: block;
    text-indent: 0;
    line-height: initial;
  }
}


li.disc,
li.decimal
{
  padding-left: 0.5rem;
  margin-left: 2.5rem;
  margin-bottom: 1rem;
}

li.disc
{
  list-style-type: disc;
}

li.decimal
{
  list-style-type: decimal;
}


@include respond-to(mobile)
{
  .mobile\:text-left {
    text-align: left;
  }
  .mobile\:text-right {
    text-align: right;
  }
  .mobile\:text-center {
    text-align: center;
  }
  .mobile\:text-xxs {
    font-size: 0.5em;
  }
  .mobile\:text-xs {
    font-size: 0.75em;
  }
  .mobile\:text-s {
    font-size: 0.875em;
  }
  .mobile\:text-m {
    font-size: 1.25em;
  }
  .mobile\:text-l {
    font-size: 1.5em;
  }
  .mobile\:text-xl {
    font-size: 1.75em;
  }
}

@include respond-to(desktop)
{
  .desktop\:text-left {
    text-align: left;
  }
  .desktop\:text-right {
    text-align: right;
  }
  .desktop\:text-center {
    text-align: center;
  }
  .desktop\:text-xxs {
    font-size: 0.5em;
  }
  .desktop\:text-xs {
    font-size: 0.75em;
  }
  .desktop\:text-s {
    font-size: 0.875em;
  }
  .desktop\:text-m {
    font-size: 1.25em;
  }
  .desktop\:text-l {
    font-size: 1.5em;
  }
  .desktop\:text-xl {
    font-size: 1.75em;
  }
}