@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;

@media print {
  a {
    font-weight: 500;
  }

  a::after {
    border-bottom: 1px solid var(--white);
    font-weight: 300;
    word-break: break-all;
    white-space: normal;
  }

  a[href*="://"]:not(.u-link-text-is-url)::after
  {
    // Output href in parentheses for links with a protocol already there.
    content: ' (' attr(href) ')';
  }

  a[href^='/']:not(.u-link-text-is-url)::after {
    // Output root-relative hrefs in parentheses with our domain prepended.
    content: ' (cfpb.gov' attr(href) ')';
  }

  a[href^='/ask-cfpb/']:not(.u-link-text-is-url)::after,
  a[href*='consumerfinance.gov/ask-cfpb']:not(.u-link-text-is-url)::after {
    // Use short URL when printing Ask CFPB links.
    content: ' (' attr(data-pretty-href) ')';
  }

  a.o-header__logo-img::after,
  a.m-info-unit__heading-link::after,
  .m-info-unit__content h4 a::after {
    // Do not append hrefs to the logo or info unit headings.
    content: none !important;
  }

  a[href^='#'] {
    // Style in-page anchor links (like page TOCs) to not look like links.
    color: var(--gray-dark);
    border-bottom-width: 0;
  }

  a.a-btn {
    // These pseudo-classes are needed to guarantee specificity
    &:link,
    &:visited {
      // Replace Design System button link stylings with some generic styling
      all: unset;
      border-bottom: 1px dotted $link-underline;
      color: $link-text;
      display: inline;
      font-weight: 500;
      text-decoration: none;
    }
  }

  a.a-link--jump,
  a.m-list__link {
    // These pseudo-classes are needed to guarantee specificity
    &:link,
    &:visited {
      // Convert stand-alone (jump) links to standard inline links
      border-top: 0;
      display: inline;
      padding-top: math.div(5px, $base-font-size-px) + em;
      padding-bottom: 0;
    }
  }

  .m-list--links .m-list__item {
    // Space out stand-alone links by .5em
    margin-bottom: math.div(8px, $base-font-size-px) + em;
  }

  .o-info-unit-group {
    .content-l__col-1-2,
    .content-l__col-1-3,
    .content-l__col-2-3 {
      // Ensure content remains vertically aligned by rendering them as a table cell
      display: table-cell !important;
    }
    .content-l__col-1 {
      @include u-grid-column(12);
    }
    .content-l__col-1-2 {
      // Keep 50/50 info unit groups at two columns for print
      @include u-grid-column(6);
    }
    .content-l__col-1-3 {
      // Keep 33/33/33 info unit groups at three columns for print
      @include u-grid-column(4);
    }
    .content-l__col-2-3 {
      // Maintain 2/3 layouts for print
      @include u-grid-column(8);
    }
    .m-info-unit__image {
      // Print info unit images
      display: block;
    }
    .m-info-unit--inline .m-info-unit__image {
      // Preserve inline info unit image layout
      float: left;
      margin-right: math.div($grid-gutter-width, $base-font-size-px) + em;
    }
  }

  // Force FCMs into multiple columns when printing
  .o-featured-content-module {
    display: flex;

    &__text {
      flex: 1;
      padding-right: $fcm-visual-width + $grid-gutter-width;
      padding-left: math.div($grid-gutter-width, $base-font-size-px) + em;
    }

    &__visual {
      height: 100%;
      overflow: hidden;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0;
      position: absolute;
      top: 0;
      right: 0;
      width: $fcm-visual-width;
    }

    &__img {
      max-width: none;
      height: 100%;
      position: absolute;
    }

    // Modifiers
    &__right &__img {
      right: 0;
    }

    &__center &__img {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .o-video-player__play-btn {
    // !important used here to avoid being overridden by a much more specific
    // selector that sets the display property for this element
    // and to avoid using a selector that specific here.
    display: none !important;
  }

  .o-video-player {
    // When printing, shrink video preview images to one column with the :after
    // URL in a second column next to it.
    &__image-container {
      @include u-grid-column(6);
    }
    &::after {
      content: 'Watch the video at https://www.youtube.com/watch?v='
        attr(data-id);

      @include u-grid-column(6);
    }
  }

  .a-tagline {
    // Force the background image in the tagline to be visible when printing.
    color-adjust: exact;
  }

  .m-global-eyebrow,
  .join-the-conversation,
  .o-email-signup,
  .rss-subscribe,
  .o-search-bar,
  .m-hero__image-wrapper {
    // Hide unimportant print things
    display: none;
  }

  svg.highcharts-root {
    // Ensure highcharts charts stay within the viewport and are not cut off.
    max-width: 90vw;
  }

  // Cap content line lengths at ~ 75 characters. `ch` equals the width of the
  // 0 glyph in the font, which is wider than some others (i, f, t, etc.),
  // so setting it to 62 gives us approximately 75 characters per line.
  .content__main,
  .content__intro {
    dd,
    dt,
    li,
    p,
    label {
      max-width: 62ch;
    }
  }

  // Make tables full width.
  .o-table,
  .m-table-heading,
  .m-table-text-intro,
  .m-table-caption {
    column-span: all;
  }

  // Solving longstanding issue in Firefox of cutting off inline-block
  // elements after one page.
  /* stylelint-disable at-rule-no-vendor-prefix */
  @-moz-document url-prefix() {
    /* stylelint-enable at-rule-no-vendor-prefix */
    html,
    body {
      margin: 0;
      padding: 0;
    }

    .content__main {
      margin: 0;
      display: block !important;
    }

    .content__sidebar {
      display: block !important;
    }
  }
}
