//- Our basic setup for text on the sheet.
%baseText{
  line-height: normal;
}
//- styling for italic words
%italics{
  font-style: italic;
}
%uppercase{
  text-transform:uppercase;
}
%textStyles{
  .sheet-italics,
  .italics{
    @extend %italics;
  }
}
//- Basic styling for headers.
%baseHeader{
  @extend %baseText;
  color:var(--fontColor);
  white-space: nowrap;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight:normal;
}

//- Headers that should pop!
%importantHeader{
  text-transform: uppercase;
  font-weight: normal;
}

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

//- The next several placeholders are for styling our various levels of headers (1-5).
%h1-style{
  @extend %baseHeader;
  @extend %importantHeader;
  font-size: 1.5rem;
  font-family: var(--topHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h1{
  @extend %h1-style;
  *{
    @extend %h1-style;
  }
}
%h2-style{
  @extend %baseHeader;
  @extend %importantHeader;
  font-size: 1.375rem;
  font-family: var(--topHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h2{
  @extend %h2-style;
  *{
    @extend %h2-style;
  }
}
%h3-style{
  @extend %baseHeader;
  @extend %importantHeader;
  font-size: 1.25rem;
  font-family: var(--topHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h3{
  @extend %h3-style;
  *{
    @extend %h3-style;
  }
}
%h4-style{
  @extend %baseHeader;
  @extend %midHeader;
  font-size: 1.125rem;
  font-family: var(--midHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h4{
  @extend %h4-style;
  *{
    @extend %h4-style;
  }
}
%h5-style{
  @extend %baseHeader;
  @extend %midHeader;
  font-size: 1rem;
  font-style:normal;
  font-family: var(--midHeaderFont);
  &:not(input){
    text-align: center;
  }
}
%h5{
  @extend %h5-style;
  *{
    @extend %h5-style;
  }
}
%headerElements{
  h1,
  *[aria-level='1']{
    @extend %h1;
  }
  h2,
  *[aria-level='2']{
    @extend %h2;
  }
  h3,
  *[aria-level='3']{
    @extend %h3;
  }
  h4,
  *[aria-level='4']{
    @extend %h4;
  }
  h5,
  *[aria-level='5']{
    @extend %h5;
  }
}
%textElements{
  span,
  input,
  textarea,
  p{
    font-size: 1rem;
    color:var(--fontColor);
    @extend %baseText;
  }
  span,input,textarea,button,select{
    font-family:var(--contentFont);
  }
  .big-text,
  .sheet-big-text{
    @extend %h3;
  }
  .tiny-text,
  .sheet-tiny-text{
    font-size:0.75rem;
  }
  .uppercase{
    text-transform:uppercase !important;
  }
}