// ---------- base ----------- */
html {
  font-family: $font-default;
  font-size: 100%;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: inherit;
  color: $color-font-default;
  font-size: type-scale-for("body", "font-size");
  line-height: type-scale-for("body", "line-height");
}

// ---------- headings -----------

h1 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 3rem;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 2.375rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}

h4 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2rem;
}

.heading {
  font-weight: $font-weight-semibold;
  margin: 1em 0;

  &:first-child {
    margin-top: 0;
  }

  * + & {
    margin-top: 2em;
  }
}

.heading--jumbo {
  font-size: 2.5em;
  margin-bottom: 0.8em;
}

.heading--1 {
  @include create-type-scale(h1);
}

.heading--2 {
  @include create-type-scale(h2);
}

.heading--3 {
  @include create-type-scale(h3);
}

.heading--4 {
  @include create-type-scale(h4);
}

.heading--sup {
  margin-bottom: 0;
}

.heading--sub {
  margin-top: 0;
}

.heading--cta {
  line-height: 1;
}

.heading__cta {
  float: right;
  line-height: 1;
}

// ---------- links -----------

a,
a:visited,
.link {
  color: $color-font-link-default;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &:focus {
    outline: dotted 2px $color-font-link-default--focus;
    outline-offset: 1px;
  }

  img {
    outline: none;
    border: 0;
  }
}

.link--silent {
  &,
  &:hover,
  &:active,
  &:visited {
    text-decoration: none;
    color: $color-font-default;
  }
}

.link--underlined {
  &,
  &:visited {
    text-decoration: underline;
  }

  &:hover,
  &:active {
    text-decoration: none;
  }
}

.link--alt {
  &,
  &:visited {
    text-decoration: none;
    color: $color-font-default;
    font-weight: $font-weight-semibold;
  }

  &:hover,
  &:active {
    text-decoration: none;
    color: $color-font-link-default;

    > * {
      color: inherit;
    }
  }
}

// ---------- copy-level tags -----------

strong,
em {
  //reset strong and em to have regular styling so they can used semantically with no styling assumptions, use .text-bold .text-italic for non-semantic styling
  font-weight: $font-weight-regular;
  font-style: normal;
}

.text-xsmall {
  font-size: 0.625em;
}

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

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

.text-large {
  font-size: 1.125em;
}

.text-caps {
  text-transform: uppercase;
}

.text-highlight {
  color: $colour-orange;
  font-weight: $font-weight-semibold;
}

.text-invert {
  color: #fff;
}

.text-dampen {
  color: $colour-grey-dark;
}

.text-light {
  font-weight: $font-weight-light;
}

.text-semi-bold {
  font-weight: $font-weight-semibold;
}

.text-bold {
  font-weight: $font-weight-bold;
}

.text-xbold {
  font-weight: $font-weight-xbold;
  font-style: normal; //set to normal so don't have to download 800+italic font just for this
}

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

.text-space-left {
  margin-left: 10px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;

  &--small {
    @media (min-width: $screen-small) {
      text-align: right;
    }
  }

  &--medium {
    @media (min-width: $screen-medium) {
      text-align: right;
    }
  }

  &--large {
    @media (min-width: $screen-large) {
      text-align: right;
    }
  }
}

.text-success {
  color: $colour-green;

  &.is-valid::after {
    content: "";
    display: inline-block;
    margin-left: 5px;
  }
}

.text-error {
  color: $colour-red;

  &.is-invalid::after {
    content: "";
    display: inline-block;
    margin-left: 5px;
  }
}

.no-wrap {
  white-space: nowrap;
}

.no-wrap--ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

mark {
  background-color: $color-yellow-lightmid;
}