/* stylelint-disable selector-max-empty-lines */
@import (reference) "../../variables/neptune-tokens.less";
@import (reference) "../mixins/_logical-properties.less";
@import (reference) "../mixins/_links.less";
@import (reference) "../addons/_spacing-utilities.less";

// TITLE

/* DEPRECATED: use .np-text-*-title instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
h1,
h2,
h3,
h4,
h5,
h6,
.np-text-title-screen,
.np-text-title-section,
.np-text-title-subsection,
.np-text-title-body,
.np-text-title-group {
  margin: 0;
  color: var(--color-content-primary);
  line-height: var(--line-height-title);
  letter-spacing: 0;
  .np-text-hyphenated;

  + p,
  + ul:not(.list-unstyled),
  + ol:not(.list-unstyled) {
    margin-top: var(--size-8);
  }
}

/* DEPRECATED: use .np-text-title-screen instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.h1,
.title-1,
h1,
.np-text-title-screen {
  margin-bottom: initial;
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: -0.021em;
  line-height: 115%;
}

/* DEPRECATED: use .np-text-title-section instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.h2,
.title-2,
h2,
.np-text-title-section {
  margin-bottom: initial;
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-26);
  letter-spacing: -0.02em;
  line-height: 122%;
}

/* DEPRECATED: use .np-text-title-subsection instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.h3,
.title-3,
h3,
.np-text-title-subsection {
  margin-bottom: initial;
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: -0.018em;
  line-height: 125%;
}

/* DEPRECATED: use .np-text-title-body instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.h4,
.title-4,
h4,
.np-text-title-body {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: -0.014em;
  line-height: 135%;
}

/* DEPRECATED: use .np-text-title-group instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.h5,
.h6,
.title-5,
h5,
h6,
.np-text-title-group {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-14);
  letter-spacing: -0.006em;
  line-height: 140%;
}

/* DEPRECATED: use .np-text-title-body instead */
.lead {
  margin-bottom: var(--size-24);
  font-size: var(--font-size-20);
  line-height: var(--line-height-title);
}

// DEPRECATED: use .np-text-body-default instead
.tiny {
  color: var(--color-content-secondary);
}

// BODY

/* DEPRECATED: use .np-text-body-default instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.body-2, .body-3, .small, .tiny,
body, small,
.np-text-body-default {
  font-size: var(--font-size-14);
  line-height: 155%;
  letter-spacing: -0.006em;
  font-weight: var(--font-weight-regular);
}

/* DEPRECATED: use .np-text-body-default-bold instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.control-2,

// DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
.label, .control-label,

.np-text-body-default-bold {
  font-size: var(--font-size-14);
  line-height: 155%;
  letter-spacing: -0.006em;
  font-weight: var(--font-weight-semi-bold);
}

/* DEPRECATED: use .np-text-body-large instead  */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.body-1, .value,
.np-text-body-large {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-16);
  line-height: 150%;
  letter-spacing: -0.011em;
}

/* DEPRECATED: use np-text-body-large-bold instead */
/* stylelint-disable-next-line selector-list-comma-newline-after */
.control-1,
.np-text-body-large-bold {
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--font-size-16);
  line-height: 150%;
  letter-spacing: -0.011em;
}

// LINK

a,
.np-text-link-default,
.np-text-link-large {
  font-weight: var(--font-weight-semi-bold);
  .link-underline();
}

.np-text-link-large {
  font-size: var(--font-size-16);
  letter-spacing: -0.011em;
  line-height: 150%;
}

.np-text-link-default {
  font-size: var(--font-size-14);
  letter-spacing: -0.006em;
  line-height: 155%;
}

// DISPLAY

.np-text-display-number {
  font-weight: var(--font-weight-semi-bold);
  font-size: 40px;
  line-height: 110%;
}

.display-formatting(
@font-size;
@line-height;
@font-weight: var(--font-weight-regular)) {
  font-size: @font-size;
  line-height: @line-height;
  font-weight: @font-weight;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.np-text-display-extra-large,
.np-text-display-large,
.np-text-display-medium,
.np-text-display-small {
  font-family: var(--font-family-display);
  font-synthesis: none;

  :lang(ja) &,
  :lang(th) &,
  :lang(zh-CN) &,
  :lang(zh-HK) & {
    /**
     * Wise Sans covers extended Latin glyphs for logged-in experiences and a small subset
     * of Japanese ones for the logged out ones (exposed by the Editorial DS). Unfortunately,
     * font files are browser-cached and we carried over to launchpad, where it causes issues
     * for unsupported locales, especially those that share glyphs, like Japanese and Chinese.
     */
    font-family: var(--font-family-regular);
  }
}

/* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
.np-text-display-extra-large,
.np-text-display-large,
.np-text-display-medium,
.np-text-display-small {
  letter-spacing: normal;
  .np-text-hyphenated;
}

.np-text-display-extra-large,
.np-text-display-large {
  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
}

.np-text-display-medium {
  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
}

.np-text-display-small {
  .display-formatting(var(--size-40), normal, var(--font-weight-bold));
}

:lang(en) {
  > .np-text-display-extra-large,
  > .np-text-display-large {
    .display-formatting(var(--size-64), 0.85);
  }

  > .np-text-display-medium {
    .display-formatting(var(--size-52), 0.85);
  }

  > .np-text-display-small {
    .display-formatting(var(--size-40), 0.85);
  }
}

:lang(af),
:lang(sq),
:lang(eu),
:lang(bs),
:lang(ca),
:lang(kw),
:lang(hr),
:lang(cs),
:lang(da),
:lang(nl),
:lang(eo),
:lang(et),
:lang(fo),
:lang(fi),
:lang(fr),
:lang(gl),
:lang(lg),
:lang(de),
:lang(hu),
:lang(is),
:lang(se),
:lang(id),
:lang(in),
:lang(ga),
:lang(it),
:lang(kl),
:lang(ki),
:lang(rw),
:lang(lv),
:lang(lt),
:lang(lb),
:lang(mg),
:lang(ms),
:lang(mt),
:lang(gv),
:lang(mi),
:lang(nd),
:lang(nb),
:lang(nn),
:lang(om),
:lang(pl),
:lang(pt),
:lang(ro),
:lang(rm),
:lang(rn),
:lang(sg),
:lang(gd),
:lang(sr),
:lang(sn),
:lang(sk),
:lang(sl),
:lang(so),
:lang(es),
:lang(sw),
:lang(sv),
:lang(tr),
:lang(cy),
:lang(fy),
:lang(wo),
:lang(zu),
:lang(hsb),
:lang(gsw),
:lang(dsb),
:lang(fil) {
  .np-text-display-extra-large,
  .np-text-display-large {
    .display-formatting(var(--size-64), 1.05);
  }

  .np-text-display-medium {
    .display-formatting(var(--size-52), 1.05);
  }

  .np-text-display-small {
    .display-formatting(var(--size-40), 1.05);
  }
}

:lang(el),
:lang(az),
:lang(be),
:lang(bs),
:lang(bg),
:lang(ce),
:lang(mk),
:lang(os),
:lang(ru),
:lang(sr),
:lang(uk),
:lang(uz),
:lang(sah) {
  .np-text-display-extra-large,
  .np-text-display-large {
    .display-formatting(var(--size-60),
    120%,
    var(--font-weight-semi-bold));
  }

  .np-text-display-medium {
    .display-formatting(var(--size-48),
    120%,
    var(--font-weight-semi-bold));
  }

  .np-text-display-small {
    .display-formatting(var(--size-40),
    120%,
    var(--font-weight-semi-bold));
  }
}

/* DEPRECATED: use `.np-text-display-*` instead */
.display-1 {
  margin-bottom: var(--size-24);
  /* stylelint-disable-next-line number-max-precision */
  font-size: 3.7333333333rem;

  @media (--screen-md) {
    margin-bottom: var(--size-8);
    font-size: 6.5rem;
  }
}

/* DEPRECATED: use `.np-text-display-*` instead */
.display-2 {
  margin-bottom: var(--size-24);
  /* stylelint-disable-next-line number-max-precision */
  font-size: 3.7333333333rem;

  @media (--screen-md) {
    margin-bottom: var(--size-16);
    font-size: 5.5rem;
  }
}

/* DEPRECATED: use `.np-text-display-*` instead */
.display-3 {
  margin-bottom: var(--size-8);
  font-size: 2.8rem;

  @media (--screen-md) {
    margin-bottom: var(--size-24);
    font-size: 4.5rem;
  }
}

/* DEPRECATED: use `.np-text-display-*` instead */
.display-4 {
  margin-bottom: var(--size-4);
  /* stylelint-disable-next-line number-max-precision */
  font-size: 1.8666666667rem; // 28/15px

  @media (--screen-md) {
    margin-bottom: var(--size-24);
    font-size: 3.5rem; // 56px
  }
}

/* DEPRECATED: use `.np-text-display-*` instead */
.display-5 {
  margin-bottom: var(--size-4);
  /* stylelint-disable-next-line number-max-precision */
  font-size: 1.8666666667rem; // 28/15px

  @media (--screen-md) {
    margin-bottom: var(--size-8);
    font-size: 2.625rem; // 42px
  }
}

p {
  margin: 0 0 var(--size-16);

  + h1,
  + h2,
  + h3,
  + h4,
  + h5,
  + h6,
  + .h1,
  + .h2,
  + .h3,
  + .h4,
  + .h5,
  + .h6,
  + .title-1,
  + .title-2,
  + .title-3,
  + .title-4,
  + .title-5,
  + .np-text-title-screen,
  + .np-text-title-section,
  + .np-text-title-subsection,
  + .np-text-title-body,
  + .np-text-title-group {
    margin-top: 0;
    margin-bottom: var(--size-8);
  }
}

.control-1,
.control-2 {
  color: var(--color-content-accent);
}

strong,
b {
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-content-primary);
}

mark,
.mark {
  padding: var(--size-4);
  background-color: var(--color-background-warning);
}

address {
  margin-bottom: var(--size-24);
  font-style: normal;
}

blockquote {
  margin: var(--size-16) 0;
  padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
  font-size: var(--font-size-16);
  .border(left, 2px, solid, var(--color-content-accent));

  p {
    margin-bottom: var(--size-8);
  }

  p,
  ol,
  ul {
    &:last-child {
      margin-bottom: 0;
    }
  }

  footer {
    display: block;
    color: var(--color-content-secondary);
    font-size: var(--font-size-14);
    line-height: var(--line-height-body);

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

  @media (--screen-sm) {
    margin: var(--size-24);
  }

  @media (--screen-lg) {
    margin: var(--size-32);
    font-size: var(--font-size-16);
  }
}

.blockquote-reverse {
  .padding(right, 22px);

  .padding(left, 0);

  .text-align(right);

  .border(right, 2px, solid, var(--color-content-accent));

  .border(left, 0);

  footer {
    &::before {
      content: "";
    }

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

pre,
code,
kbd {
  border-radius: var(--radius-small);
}

pre {
  margin: 0 0 var(--size-24);
  padding: var(--size-16);
  overflow: auto;
  color: var(--color-content-secondary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-body);
  word-wrap: break-word;
  word-break: break-all;
  background-color: var(--color-background-neutral);

  code {
    padding: 0;
    font-size: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
  }
}

code {
  padding: 2px var(--size-4);
  font-size: 90%;
  color: var(--color-content-secondary);
  background-color: var(--color-background-neutral);
}

kbd {
  padding: 2px var(--size-4);
  font-size: 90%;
  color: #fff;
  background-color: #333;

  kbd {
    padding: 0;
    font-weight: var(--font-weight-bold);
    font-size: 100%;
  }
}