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

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

// Ellipsis styling for interstitial Links
.c-article-body__text--interstitial {
  margin-left: rem(15);
  margin-right: rem(15);
  @include mq($from: tablet) {
    margin-left: rem(30);
    margin-right: rem(30);
  }

  .c-article-body__link {
    @include font-pratt-bold;
    @include css-variables("font-size", 17);
    line-height: line-height(17, 20);
    letter-spacing: 0;
    &:visited {
      color: $color-grey-660;
      border-bottom: 1px solid $color-grey-660;
    }
    &:hover {
      color: $color-red-500;
      border-bottom: 1px solid $color-red-500;
    }
    &:focus,
    &:active {
      color: $color-grey-600;
      border-bottom: 1px solid $color-grey-600;
    }
  }
}

// Interstitial ADV
.c-article-body__text--interstitial--adv {
  margin-left: rem(15);
  margin-right: rem(15);
  @include mq($from: tablet) {
    margin-left: rem(30);
    margin-right: rem(30);
  }

  .c-article-body__link {
    font-family: $font-sans-stack;
    font-size: scaleleable-size(17);
    line-height: line-height(17, 20);
    letter-spacing: 0;
    font-weight: bold;
    &:visited,
    &:hover {
      color: $color-grey-660;
      border-bottom: 1px solid $color-grey-660;
    }
    &:focus,
    &:active {
      color: $color-grey-500;
      border-bottom: 1px solid $color-grey-500;
    }
  }
}
