/*------------------------------------*\
    $TEXT TYPES
\*------------------------------------*/

/**
 * Primary type styles
 */

/**
 * Text Transforms
 */
.u-text-transform--upper {
  text-transform: uppercase;
}

.u-text-transform--lower {
  text-transform: lowercase;
}

/**
 * Text Styles
 */
.u-text-style--italic {
  font-style: italic;
}

.u-font-weight--normal {
  font-weight: normal;
}

/**
 * Text Positioning
 */
.u-align--center {
  text-align: center;
}

/**
 * Text Decorations
 */
.u-text-decoration--underline {
  text-decoration: underline;
}

/**
 * Rich text editor text
 */
.o-rte-text {
  @include typeface(body, 6);
}

/* broken markup compat*/
.o-rte-text.c-article__body {
  @include typeface(body, 6);
}

.o-rte-text > dl dd,
.o-rte-text > dl dt,
.o-rte-text > ol li,
.o-rte-text > ul li,
.o-rte-text > p {
  @include typeface(body, 6);
}

.o-rte-text a {
  color: rgb(var(--color-link));
  border-bottom: 2px dotted rgb(var(--color-link));
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.o-rte-text a:hover {
  color: rgba(var(--color-link-hover) var(--opacity-link-hover));
  text-decoration: none;
}

.o-rte-text a:visited {
  color: rgb(var(--color-link));
}

.o-rte-text > h1,
.o-rte-text > h2,
.o-rte-text > h3,
.o-rte-text > h4,
.o-rte-text > h5,
.o-rte-text > h6 {
  padding-top: var(--space-4);
}

.o-rte-text > h1 {
  @include typeface(header, 9);
  @include media(">=medium") {
    @include typeface(header, 11);
  }
  @include media(">large") {
    @include typeface(header, 15);
  }
}

.o-rte-text > h2 {
  @include typeface(header, 9);
  @include media(">=medium") {
    @include typeface(header, 11);
  }
}

.o-rte-text > h3 {
  @include typeface(header, 8);
  @include media(">=medium") {
    @include typeface(header, 10);
  }
}

.o-rte-text > h4 {
  @include typeface(header, 6);
  @include media(">=medium") {
    @include typeface(header, 8);
  }
}

.o-rte-text > h5,
.o-rte-text > h6 {
  @include typeface(small, 2);
  @include media(">=medium") {
    @include typeface(small, 4);
  }
  letter-spacing: 1px;
  text-transform: uppercase;
}

.o-rte-text h2:empty,
.o-rte-text h3:empty,
.o-rte-text p:empty {
  display: none;
}

/* Heading + subheading lockup*/
.o-rte-text > h2 + h3 {
  margin-top: 0;
  padding-bottom: var(--space-2);
}

.o-rte-text > ul,
.o-rte-text > ol {
  position: relative;
  list-style: none;
  padding-left: 35px;
  padding-top: var(--space-3);
  margin-bottom: var(--space-5);

  @include media('>large') {
    margin-left: var(--space-3);
  }
}

.o-rte-text > ul:last-child, .o-rte-text > ol:last-child {
  margin-bottom: 0;
}

.o-rte-text > ul li, .o-rte-text > ol li {
  margin-bottom: var(--space-3);
  position: relative;
}

.o-rte-text > ul ul,
.o-rte-text > ul ol,
.o-rte-text > ol ul,
.o-rte-text > ol ol {
  list-style: none;
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
}

.o-rte-text > ul li:before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) * -1);
  top: .75em;
  width: 7px;
  height: 7px;
  background-color: rgb(var(--color-link));
  border-radius: 50%;
}

.o-rte-text > ul li li:before {
  background-color: transparent;
  border: 2px solid rgb(var(--color-link));
  width: 4px;
  height: 4px;
}

.o-rte-text > ol {
  counter-reset: counter;
}

.o-rte-text > ol li:before {
  @include typeface(small, 11);
  counter-increment: counter;
  content: counter(counter);
  color: rgb(var(--color-text));
  position: absolute;
  left: -58px;
  top: -.4em;
  width: 50px;
  text-align: right;

  @include media('<=large') {
    font-size: var(--font-size-10);
    top: -.3em;
  }
}

.o-rte-text > ol li > ol {
  counter-reset: counter;
}

.o-rte-text > ol li > ol > li:before {
  counter-increment: counter;
  content: counters(counter);
}

.o-rte-text > hr,
.o-rte-text > div,
.o-rte-text .o-ad {
  margin-top: var(--space-4);
  @include media('>large') {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
}

.o-rte-text code,
.o-rte-text pre {
  font-size: 125%;
}


/**
 * Pullquote (beefed up blockquote)
 */
.o-pullquote {
  margin: auto var(--space-3);
  text-align: center;
  background: none;
  border: none;

  @include media('>medium') {
    margin: auto calc(var(--grid-col-width) + var(--grid-gutter)) var(--space-7);
  }
}

.o-pullquote p {
  font-weight: bold;
  font-size: var(--font-size-11);
  line-height: 1.05;
  background: none;
  margin: var(--space-3) 0 0;
  display: inline-block;

  @include media('>medium') {
    font-size: var(--font-size-14);
  }
}

.o-pullquote p span {
  quotes: "\201C""\201D""\2018""\2019";
  background-position: bottom;
}

.o-pullquote p span:before,
.o-pullquote p span:after {
  @include typeface(header, 11);
}

.o-pullquote p span:before {
  content: open-quote;
}

.o-pullquote p span:after {
  content: close-quote;
}

.o-pullquote__author {
  color: rgb(var(--color-text-muted));
  @include typeface(small, 1);
  @include media(">=medium") {
    @include typeface(small, 3);
  }
  letter-spacing: 1px;
  text-transform: uppercase;
}


/**
 * Text background accent
 */
.o-bg-text-accent {
  background-image: linear-gradient(rgba(var(--color-text-muted), .2), rgba(var(--color-text-muted), .2));
  background-position: center bottom .2em;
  background-size: 100% .55em;
  background-repeat: no-repeat;
  padding: 0 var(--space-2);
  box-decoration-break: clone;
  margin-left: calc(var(--space-2) * -1);
}

.o-bg-text-accent--senary {
  background-image: linear-gradient(rgba(var(--color-background-highlight), .2), rgba(var(--color-background-highlight), .2)); //dark
}


/**
 * Kicker, Tags, and Breadcrumbs
 */
.o-tag,
.o-kicker,
.o-breadcrumb {
  @include typeface(small, 1);
  line-height: 1;
  @include media(">=medium") {
    font-size: var(--font-size-3);
    line-height: var(--line-height-3);
    font-weight: bold;
  }
  background-color: rgb(var(--color-tag-background));
  padding: 2px 6px 3px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  color: rgb(var(--color-tag-text));
  font-weight: bold;
}

.o-tag,
.o-kicker {
  font-size: var(--font-size-1);
}

a.o-kicker {
  box-decoration-break: clone;
}

.o-tag,
a.o-breadcrumb {
  display: inline-block;
}

a.o-kicker:hover,
.o-tag:hover,
a.o-breadcrumb:hover {
  color: rgb(var(--color-tag-hover-text));
  background-color: rgb(var(--color-tag-hover-background));
  opacity: var(--opacity-tag-hover);
  text-decoration: none;
}

.o-tags .o-tag {
  margin: 0 var(--space-1) var(--space-2) 0;
}

/**
 * Caption & credit (used in leads and figures)
 */
.o-caption p, .o-caption__text {
  @include typeface(body, 4);
}

.o-caption .o-icon--dashed-arrow {
  margin-right: var(--space-2);
  fill: rgb(var(--color-primary-2));
  transform: translateY(1px);
  float: left;
}

.o-caption .o-credit:not(:first-child) {
  margin-left: var(--space-2);
}

.o-credit {
  @include typeface(small, 1);
  line-height: 1.8;
  margin-left: var(--space-1);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.o-credit a {
  padding-bottom: 0;
  display: inline;
  text-decoration: none;
}


/**
 * Back to top of page link
 */
.o-to-top {
  width: 150px;
  margin: var(--space-5) auto;
  display: flex;
  align-items: center;
  position: relative;
  z-index: $z-index-to-top;
  @include typeface(small, 1);
  @include media(">=medium") {
    @include typeface(small, 3);
  }
  text-transform: uppercase;
}

/* Temporary until i can get the real icon*/
.o-to-top .o-icon--up-arrow {
  margin-right: var(--space-2);
  fill: rgb(var(--color-link));
}

.o-to-top svg {
  transform: rotate(-90deg) translateX(4px);
}

.o-to-top:hover {
  color: rgb(var(--color-link));
}

.o-to-top:hover .o-icon--up-arrow {
  animation: bounce .8s 0s ease-in-out infinite;
}

.u-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* truncating a flex child is weird*/
/* any flex items within which a truncated*/
/* item is nested need to have min-width: 0;*/
/* https://css-tricks.com/flexbox-truncated-text/*/
._u-truncate--flex {
  min-width: 0;
}

/**
 * Back to where you came from link
 */
.o-back-to-link {
  font-size: var(--font-size-8);
  margin-left: calc(var(--space-1) * -1);
  padding-left: var(--space-5);
  position: relative;
  display: block;
}

.o-back-to-link .o-icon--prev-caret {
  margin: 6px var(--space-1) 0 0;
  transform: rotate(90deg);
  min-width: 20px;
  left: 0;
  top: 4px;
  position: absolute;
}

.o-back-to-link .u-path-fill--white svg * {
  fill: rgb(var(--color-text-inverse)); //no fill
}

.o-back-to-link .u-has-accent {
  line-height: 1.6;
  display: inline;
  background-image: linear-gradient(to right, transparent 55%, rgb(var(--color-background)) 45%);
  background-position: left bottom 2px;
  background-repeat: repeat-x;
  background-size: 4px 2px;
  box-decoration-break: clone;
  padding-bottom: 0;
  border-bottom: none;
}

/**
 * End of content label
 */
.o-end-label {
  display: block;
  width: 34px;
  text-align: center;
  text-transform: uppercase;
  margin: var(--space-3) auto;
  padding: var(--space-3) 0;
}

/* Temporary until i can get the real icon*/
.o-end-label .o-icon--down-arrow {
  transform: rotate(90deg);
  fill: rgb(var(--color-high-contrast), 0.358);
  margin-bottom: var(--space-2);
}

.c-gallery-end-label {
  flex-basis: 100%;
  @include typeface(small, 1);
  @include media(">=medium") {
    @include typeface(small, 3);
  }
}

.c-gallery-end-label > .o-icon--down-arrow {
  display: block;
  margin: 0 auto var(--space-2);
}

/* Quinary background color*/
.o-3d-heading--quinary:after {
  background-color: rgb(var(--color-background-highlight))
}


/**
 * Border accents
 */
.u-border-accent {
  @include border-accent;
}

.u-border-accent--right {
  @include border-accent(bottom);
}

.u-border-accent--left {
  @include border-accent(bottom, left);
}

hr.u-border-accent {
  background-color: transparent;
}