@import "settings.breakpoints";
@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.article-body";

.c-article-body {
  hr {
    border: none;
    height: rem(1);
    background-color: $color-stone-300;
    margin-top: rem(30);
    margin-bottom: rem(30);
    overflow: hidden;
  }
}

// This huge stack of selectors will probably easier to maintain than packaging
// these styles in their own class, because that class would have to be manually
// applied to each element, which would be difficult to maintain and would junk
// up our markup
.c-article-body__text,
.c-article-body__dt,
.c-article-body__dd,
.c-article-body__li {
  @include c-article-body-font;
}
.c-article-body__text--light {
  color: $color-white;
}
.c-article-body__ul {
  list-style: disc outside;
}
.c-article-body__ol {
  list-style: decimal outside;
}
.c-article-body__li {
  padding-bottom: rem(10);
}
.c-article-body__share-text {
  padding: rem(3);
  text-decoration: none;
  color: $color-grey-900;
  background-color: lighten($color-green, 45%);
  &:hover {
    color: $color-red-500;
    border-bottom: 1px solid $color-red-500;
  }
  &:focus {
    color: $color-red-bright;
    border-bottom: 1px solid $color-red-bright;
  }
}
.c-article-body__subheading {
  @include font-gm-sans-bold;
  color: $color-grey-660;
  letter-spacing: rem(1.3);
  text-transform: uppercase;
  font-size: rem(15);
  // support for text resizer where the class name is applied to the body container
  .c-article-body-scale--step1 & {
    font-size: rem(17.25);
  }
  .c-article-body-scale--step2 & {
    font-size: rem(19.5);
  }
  .c-article-body-scale--step3 & {
    font-size: rem(21.75);
  }
  .c-article-body-scale--max & {
    font-size: rem(24); // 18 + 60%
  }
}

// Ellipsis world styling for subheadings (h2 to h6)
.c-article-body__subheading-v2 {
  color: $color-grey-900;
  margin: rem(35) 0 rem(15) 0;

  b, strong {
    font-weight: normal;
  }

  a, a:visited {
    color: $color-grey-900;
  }

  a:hover, a:focus {
    color: $color-red-500;
  }

  a:active {
    color: $color-grey-500;
  }

  .c-article-body-scale--step1 & {
    font-size: rem(17.25);
  }
  .c-article-body-scale--step2 & {
    font-size: rem(19.5);
  }
  .c-article-body-scale--step3 & {
    font-size: rem(21.75);
  }
  .c-article-body-scale--max & {
    font-size: rem(24); // 18 + 60%
  }
}

.c-article-body__subheading-v2--regular {
  @include font-pratt-bold;
}

.c-article-body__subheading-v2--adv {
  font-family: $font-sans-stack;
}

.c-article-body__subheading-v2--level2 {
  font-size: rem(24);
  letter-spacing: 0;
  line-height: line-height(24, 28);

  @include mq($from: tablet) {
    font-size: rem(28);
    line-height: line-height(28, 30);
  }
}

.c-article-body__subheading-v2--level3 {
  font-size: rem(22);
  padding-bottom: rem(3);
  border-bottom: 1px solid $color-stone-500;
  letter-spacing: 0;
  line-height: line-height(22, 24);
}

.c-article-body__subheading-v2--level4 {
  font-size: rem(14);
  margin-bottom: 0;
  margin-top: rem(22);
  display: inline-block;
  padding-bottom: rem(3);
  border-bottom: 1px solid $color-stone-500;
  letter-spacing: rem(1);
  text-transform: uppercase;
  line-height: line-height(14, 14);
}

.c-article-body__subheading-v2--level3, .c-article-body__subheading-v2--level4 {
  a {
    text-decoration: none;
    color: $color-red-900;

    &:visited {
      color: $color-red-900;
    }

    &:hover, &:focus {
      color: $color-red-500;
    }

    &:active {
      color: $color-grey-500;
    }
  }
}

.c-article-body__subheading-v2--level5 {
  text-transform: uppercase;
  font-size: rem(14);
  letter-spacing: rem(1);
  line-height: line-height(14, 14);
}

.c-article-body__subheading-v2--level6 {
  color: $color-grey-800;
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
  line-height: line-height(12, 12);
}

.c-article-body__subheading-v2--regular {
  &.c-article-body__subheading-v2--level4,
  &.c-article-body__subheading-v2--level5,
  &.c-article-body__subheading-v2--level6 {
    @include font-gm-sans-bold;
  }
}

// Ellipsis styling for highlighted text
// sass-lint:disable class-name-format
.c-article-body__text,
.c-article-body__ul,
.c-article-body__ol {
  .hl_red {
    background: $color-utility-red-100;
  }

  .hl_tblue {
    background-color: $color-canpro-100;
  }

  .hl_yellow {
    background-color: $color-utility-yellow-500;
  }

  .hl_green {
    background-color: $color-utility-green-100;
  }

  //Default text color for other cases
  .hl_orange,
  .hl_blue,
  .hl_purple,
  .hl_pink {
    background-color: $color-stone-300;
  }
}
// sass-lint:enable class-name-format

