@use "mixins/lists";
@use "variables";
@use "vendor/rfs";
@use "mixins/breakpoints";

// stylelint-disable selector-list-comma-newline-after

//
// Headings
//

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: variables.$headings-margin-bottom;
  font-family: variables.$headings-font-family;
  font-weight: variables.$headings-font-weight;
  color: variables.$headings-color;
}

h1, .h1 {
  @include rfs.font-size(variables.$h1-font-size);
  line-height: variables.$h1-line-height;
}
h2, .h2 {
  @include rfs.font-size(variables.$h2-font-size);
  line-height: variables.$h2-line-height;
}
h3, .h3 {
  @include rfs.font-size(variables.$h3-font-size);
  line-height: variables.$h3-line-height;
}
h4, .h4 {
  @include rfs.font-size(variables.$h4-font-size);
  line-height: variables.$h4-line-height;
}
h5, .h5 {
  @include rfs.font-size(variables.$h5-font-size);
  line-height: variables.$h5-line-height;
}
h6, .h6 {
  @include rfs.font-size(variables.$h6-font-size);
  line-height: variables.$h6-line-height;
}

@include breakpoints.media-breakpoint-up(lg) {
  h1, .h1 {
    @include rfs.font-size(variables.$h1-font-size-desktop);
    line-height: variables.$h1-line-height-desktop;
  }
  h2, .h2 {
    @include rfs.font-size(variables.$h2-font-size-desktop);
    line-height: variables.$h2-line-height-desktop;
  }
  h3, .h3 {
    @include rfs.font-size(variables.$h3-font-size-desktop);
    line-height: variables.$h3-line-height-desktop;
  }
  h4, .h4 {
    @include rfs.font-size(variables.$h4-font-size-desktop);
    line-height: variables.$h4-line-height-desktop;
  }
  h5, .h5 {
    @include rfs.font-size(variables.$h5-font-size-desktop);
    line-height: variables.$h5-line-height-desktop;
  }
  h6, .h6 {
    @include rfs.font-size(variables.$h6-font-size-desktop);
    line-height: variables.$h6-line-height-desktop;
  }
}

//
// Poster sizes
//

.post1, .post2, .post3 {
  color: variables.$headings-color;
  font-family: variables.$headings-font-family;
  font-weight: variables.$post-font-weight;
  margin-bottom: variables.$headings-margin-bottom;
}

.post1 {
  @include rfs.font-size(variables.$post1-font-size);
  line-height: variables.$post1-line-height;
}
.post2 {
  @include rfs.font-size(variables.$post2-font-size);
  line-height: variables.$post2-line-height;
}
.post3 {
  @include rfs.font-size(variables.$post3-font-size);
  line-height: variables.$post3-line-height;
}

@include breakpoints.media-breakpoint-up(lg) {
  .post1 {
    @include rfs.font-size(variables.$post1-font-size-desktop);
    line-height: variables.$post1-line-height-desktop;
  }
  .post2 {
    @include rfs.font-size(variables.$post2-font-size-desktop);
    line-height: variables.$post2-line-height-desktop;
  }
  .post3 {
    @include rfs.font-size(variables.$post3-font-size-desktop);
    line-height: variables.$post3-line-height-desktop;
  }
}

/**
 * keep this below heading styles so we can apply to <h1-h6> tags and override their visual
 * treatment without using !important, so users can perform their own overrides as necessary
 * using utility classes
 */
.eyebrow {
  color: variables.$eyebrow-font-color;
  font-size: variables.$eyebrow-font-size;
  font-weight: variables.$eyebrow-font-weight;
  letter-spacing: variables.$eyebrow-letter-spacing;
  line-height: variables.$eyebrow-line-height;
  margin-bottom: variables.$eyebrow-margin-bottom;
  text-transform: uppercase;
}

.lead {
  @include rfs.font-size(variables.$lead-font-size);
  font-weight: variables.$lead-font-weight;
}


// DEPRECATED type display classes
.display-1, .display-2, .display-3, .display-4 {
  color: variables.$headings-color;
  font-family: variables.$headings-font-family;
  margin-bottom: variables.$headings-margin-bottom;
}

.display-1 {
  @include rfs.font-size(variables.$post1-font-size);
  font-weight: variables.$post-font-weight;
  line-height: variables.$post1-line-height;
}
.display-2 {
  @include rfs.font-size(variables.$post2-font-size);
  font-weight: variables.$post-font-weight;
  line-height: variables.$post2-line-height;
}
.display-3 {
  @include rfs.font-size(variables.$post3-font-size);
  font-weight: variables.$post-font-weight;
  line-height: variables.$post3-line-height;
}
.display-4 {
  @include rfs.font-size(variables.$h1-font-size);
  font-weight: variables.$headings-font-weight;
  line-height: variables.$h1-line-height;
}

@include breakpoints.media-breakpoint-up(lg) {
  .display-1 {
    @include rfs.font-size(variables.$post1-font-size-desktop);
    font-weight: variables.$post-font-weight;
    line-height: variables.$post1-line-height-desktop;
  }
  .display-2 {
    @include rfs.font-size(variables.$post2-font-size-desktop);
    font-weight: variables.$post-font-weight;
    line-height: variables.$post2-line-height-desktop;
  }
  .display-3 {
    @include rfs.font-size(variables.$post3-font-size-desktop);
    font-weight: variables.$post-font-weight;
    line-height: variables.$post3-line-height-desktop;
  }
  .display-4 {
    @include rfs.font-size(variables.$h1-font-size-desktop);
    font-weight: variables.$headings-font-weight;
    line-height: variables.$h1-line-height-desktop;
  }
}


//
// Horizontal rules
//

hr {
  margin-top: variables.$hr-margin-y;
  margin-bottom: variables.$hr-margin-y;
  border: 0;
  border-top: variables.$hr-border-width solid variables.$hr-border-color;
}


//
// Emphasis
//

small,
.small {
  @include rfs.font-size(variables.$small-font-size);
  font-weight: variables.$font-weight-normal;
}

mark,
.mark {
  padding: variables.$mark-padding;
  background-color: variables.$mark-bg;
}


//
// Lists
//

ul li,
ol li {
  margin-bottom: 0.5rem;
}

.list-unstyled {
  @include lists.list-unstyled();

  li {
    margin-bottom: 0;
  }
}

// Inline turns list items into inline-block
.list-inline {
  @include lists.list-unstyled();
}
.list-inline-item {
  display: inline-block;

  &:not(:last-child) {
    margin-right: variables.$list-inline-padding;
  }
}


//
// Misc
//

// Builds on `abbr`
.initialism {
  @include rfs.font-size(90%);
  text-transform: uppercase;
}

// Blockquotes
.blockquote {
  margin-bottom: variables.$spacer;
  @include rfs.font-size(variables.$blockquote-font-size);
}

.blockquote-footer {
  display: block;
  @include rfs.font-size(variables.$blockquote-small-font-size);
  color: variables.$blockquote-small-color;

  &::before {
    content: "\2014\00A0"; // em dash, nbsp
  }
}