// TYPOGRAPHY
@mixin small(){
  font-size: 0.89em;
}
@mixin smaller(){
  font-size: 0.792em;
}
@mixin smallest(){
  font-size: 10px;
}
@mixin large(){
  font-size: 1.125em;
}

%base-font{
  font-family: $font-family;
  font-size: $font-size;
  line-height: $base-line-height;
  font-weight: normal;
  color: $color-text;
  @include respond-to(highres-only) {
    font-size: $font-size + 1;
  }
  @include respond-to(max-medium-screen) {
    font-size: $font-size - 2;
    @include respond-to(highres-only) {
      font-size: $font-size ;
    }
  }
  @include respond-to(min-xlarge-screen) {
    font-size: $font-size + 1;
    @include respond-to(highres-only) {
      font-size: $font-size +3;
    }
  }
  @include respond-to(min-xxlarge-screen) {
    font-size: $font-size + 2;
    @include respond-to(highres-only) {
      font-size: $font-size + 4;
    }
  }
}
%heading{
  color: $color-text;
  display: block;
  font-family: $headings-font-family;
  font-weight: bold;
  line-height: 0.75*$base-line-height;
  margin: $gap 0;

  //text-rendering: optimizelegibility; // Fix the character spacing for headings todo: muze mrdat print
  .small {
	font-weight: normal;
	line-height: $base-line-height;
  }
  #content > & {
    margin: $box-padding;
  }
  &::before {
    margin-right: 0.5*$gap;
    width: $box-padding !important;
    text-align: center;
    opacity: .33;
  }
}
%h1{
  @extend %heading;
  font-size: 2em;
  margin: $box-padding 0;
  line-height: 1.1;
}
%h2{
  @extend %heading;
  font-size: 1.25em;
  margin: $box-padding 0;
  line-height: 1.5;
}
%h3{
  @extend %heading;
  font-size: 1.125em;
}
%h4{
  @extend %heading;
  font-size: 1em;
}
%h5{
  @extend %heading;
  @include small;
  font-weight: bold;
  margin: 0;
}
%h6{
  @extend %heading;
  @include smaller;
  font-weight: bold;
  margin: 0;
}
%hyphenate{
  -ms-word-break: break-all;
  //word-break: break-all; -- braks mozilla letter by letter, without seems ok in all major brwsrs

  // Non standard for webkit
  word-break: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
%truncate{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  //@extend %pseudo-after;
  //&:after{
  //  content: "...";
  //  right: 0;
  //  height: 100%;
  //  @extend %gradient-horizontal-fade-foreground;
  //}
}
%indicator{
  @include smaller;
  vertical-align: middle;
  padding: 0 5px;
  position: relative;
  top: -0.4em;
  line-height: 1;
  color: $color-important;
  display: inline-block;
  span.icon {
    color: inherit;
    &:before {
      font-size: 8px;
    }
  }
  a &{
    text-decoration: none;
  }
}
%list-style-none{
  padding: 0;
  margin: 0;
  list-style: none;
}
%list-style-counter{
  counter-reset: my-badass-counter;
  list-style: none;
  margin-bottom: $gap;
  padding-left: 0;
  & > li {
    &::before {
      content: counter(my-badass-counter);
      counter-increment: my-badass-counter;
      display: inline-block;
      margin-right: .25 * $box-padding;
      text-align: right;
      width: $box-padding;
      .wiki &, body.cke_editable & {
        margin-left: -$box-padding;
      }
    }
  }
}
