////
/// @group fonts
////
// Our basic setup for text on the sheet.
@mixin baseText{
  line-height: normal;
}
//- styling for italic words
@mixin italics{
  font-style: italic;
}
@mixin uppercase{
  text-transform:uppercase;
}
/// Utility classes for applying font styles
@mixin textStyles{
  .sheet-italics,
  .italics{
    @include italics;
  }
}
/// Basic styling for headers.
@mixin baseHeader{
  @include baseText;
  color:var(--fontColor);
  display: block;
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight:normal;
}

/// Headers that should pop!
@mixin importantHeader{
  text-transform: uppercase;
}

/// Headers that should be important, but not eye-catching
@mixin midHeader{
  &:not(:where(input)){
    text-transform:capitalize;
  }
}

//- The next several placeholders are for styling our various levels of headers (1-5).
/// Base styling of h1 level headers
@mixin h1-style{
  @include baseHeader;
  @include importantHeader;
  font-size: var(--size1);
  font-family: var(--font1);
  &:not(input){
    text-align: center;
  }
}
@mixin h1{
  @include h1-style;
  *{
    @include h1-style;
  }
}
/// Base styling of h2 level headers
@mixin h2-style{
  @include baseHeader;
  @include importantHeader;
  font-size: var(--size2);
  font-family: var(--font2);
  &:not(input){
    text-align: center;
  }
}
@mixin h2{
  @include h2-style;
  *{
    @include h2-style;
  }
}
/// Base styling of h3 level headers
@mixin h3-style{
  @include baseHeader;
  @include importantHeader;
  font-size: var(--size3);
  font-family: var(--font3);
  &:not(input){
    text-align: center;
  }
}
@mixin h3{
  @include h3-style;
  *{
    @include h3-style;
  }
}
/// Base styling of h4 level headers
@mixin h4-style{
  @include baseHeader;
  @include midHeader;
  font-size: var(--size4);
  font-family: var(--font4);
  &:not(input){
    text-align: center;
  }
}
@mixin h4{
  @include h4-style;
  *{
    @include h4-style;
  }
}
/// Base styling of h5 level headers
@mixin h5-style{
  @include baseHeader;
  @include midHeader;
  font-size: var(--size5);
  font-style:normal;
  font-family: var(--font5);
  &:not(input){
    text-align: center;
  }
}
@mixin h5{
  @include h5-style;
  *{
    @include h5-style;
  }
}
/// Base styling of h6 level headers
@mixin h6-style{
  @include baseHeader;
  @include midHeader;
  font-size: var(--size5);
  font-style:normal;
  font-family: var(--font5);
  &:not(input){
    text-align: center;
  }
}
@mixin h6{
  @include h6-style;
  *{
    @include h6-style;
  }
}
/// Header element styling is applied to normal header elements (h1 - h6) as well as elements that have an `aria-level` defined on them. Note that a `role='heading'` should also be defined on these html elements for full accessibility.
@mixin headerElements{
  h1,
  *[aria-level='1']{
    @include h1;
  }
  h2,
  *[aria-level='2']{
    @include h2;
  }
  h3,
  *[aria-level='3']{
    @include h3;
  }
  h4,
  *[aria-level='4']{
    @include h4;
  }
  h5,
  *[aria-level='5']{
    @include h5;
  }
  h6,
  *[aria-level='6']{
    @include h6;
  }
}
/// The styling that is applied to all text elements.
@mixin textElements{
  span,
  input,
  textarea,
  button,
  select{
    @include baseText;
    color: inherit;
    font-family: inherit;
    font-size:inherit;
    line-height:inherit;
  }
  @each $size in 1,2,3,4,5,6,7{
    .text-#{$size},
    .sheet-text-#{$size}{
      font-size: var(--size#{$size});
    }
  }
  .capitalize,
  .sheet-capitalize{
    text-transform: capitalize !important;
  }
  .lowercase,
  .sheet-lowercase{
    text-transform:lowercase !important;
  }
  .uppercase,
  .sheet-uppercase{
    text-transform:uppercase !important;
  }
}