:root {
  --body-text-color: var(--color-text-medium);
  --70-percent-black: var(--color-text-dark);
}

/* center */
.text-centered,
:local(.text-centered) {
  text-align: center;
}

@media screen and (--breakpoint-min-sm) {
  .sm-text-centered {
    text-align: center;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-text-centered {
    text-align: center;
  }
}

@media screen and (--breakpoint-min-lg) {
  .lg-text-centered {
    text-align: center;
  }
}

@media screen and (--breakpoint-min-xl) {
  .xl-text-centered {
    text-align: center;
  }
}

/* left */

.text-left,
:local(.text-left) {
  text-align: left;
}

@media screen and (--breakpoint-min-sm) {
  .sm-text-left {
    text-align: left;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-text-left {
    text-align: left;
  }
}

@media screen and (--breakpoint-min-lg) {
  .lg-text-left {
    text-align: left;
  }
}

@media screen and (--breakpoint-min-xl) {
  .xl-text-left {
    text-align: left;
  }
}

/* right */

.text-right,
:local(.text-right) {
  text-align: right;
}

@media screen and (--breakpoint-min-sm) {
  .sm-text-right {
    text-align: right;
  }
}

@media screen and (--breakpoint-min-md) {
  .md-text-right {
    text-align: right;
  }
}

@media screen and (--breakpoint-min-lg) {
  .lg-text-right {
    text-align: right;
  }
}

@media screen and (--breakpoint-min-xl) {
  .xl-text-right {
    text-align: right;
  }
}

.text-uppercase,
:local(.text-uppercase) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-transform-none {
  text-transform: none;
}

/* text weight */
/* NOTE: .text-light removed since it conflicted with text-light in colors.css */
.text-normal {
  font-weight: 400;
}
.text-bold,
:local(.text-bold) {
  font-weight: 700;
}

.text-heavy {
  font-weight: 900;
}

/* text style */

.text-italic {
  font-style: italic;
}

/* larger text size used for descriptions  */
.text-body,
:local(.text-body) {
  font-size: 1.286em;
  line-height: 1.457em;
  color: var(--color-text-medium); /* TODO - is this bad? */
}

.text-list {
  font-size: 1em;
}

.text-paragraph,
:local(.text-paragraph) {
  font-size: 1.143em;
  line-height: 1.5em;
}

.text-spaced,
:local(.text-spaced) {
  line-height: 1.5em;
}

.text-unspaced,
:local(.text-unspaced) {
  line-height: normal;
}

.text-small {
  font-size: 0.875em;
}

.text-smaller {
  font-size: 0.8em;
}

.text-current {
  color: currentColor;
}

.text-underline {
  text-decoration: underline;
}

.text-underline-hover:hover {
  text-decoration: underline;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.text-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
  word-wrap: anywhere;
}

.text-nowrap {
  white-space: nowrap;
}

.text-code {
  font-family: monospace;
  color: var(--color-text-medium);
  background-color: var(--color-bg-medium);
  border-radius: 2px;
  padding: 0.2em 0.4em;
  line-height: 1.4em;
  white-space: pre-wrap;
}
.text-code-plain {
  font-family: monospace;
  color: var(--color-text-dark);
  line-height: 1.4em;
  white-space: pre-wrap;
}

.text-monospace,
:local(.text-monospace) {
  font-family: Monaco, monospace;
}

.text-pre-wrap {
  white-space: pre-wrap;
}

.text-measure {
  max-width: 620px;
}

.break-anywhere {
  line-break: anywhere;
}