// Text-level semantics
//
// The elements in this section give semantics to inline text.

// Abbreviation / Acroynym
//
// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
// on hover.

abbr[title] {
  // Remove the bottom border in Chrome 57- and Firefox 39-.
  border-bottom: 0;
  // sass-lint:disable no-duplicate-properties
  // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  text-decoration: underline;
  text-decoration: underline dotted;
}

// Bold
//
// The `<strong>` element or the `<b>` element is for emphasizing a snippet of
// text with a heavier font-weight.
//
// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
// without conveying additional importance.

// Prevent the duplicate application of `bolder` by the next rule in Safari 6.

b,
strong {
  font-weight: inherit;
}

// sass-lint:disable no-mergeable-selectors
b,
strong {
  // Add the correct font weight in Chrome, Edge, and Safari.
  font-weight: bolder;
}
// sass-lint:enable no-mergeable-selectors

// Cite
//
// The `<cite>` element represents a reference to a creative work.

cite {
  // Add your styles.
}

// Code
//
// The `<code>` element represents a fragment of computer code. The `<samp>`
// element represents (sample) output from a program or computing system. The
// `<kbd>` element represents user input (typically keyboard input.)

code,
kbd,
samp {
  @extend %monospace;
}

// Deleted text
//
// The `<del>` element indicates blocks of text that have been deleted.

del {
  // Add your styles.
}

// Definition
//
// The `<dfn>` element represents the defining instance of a term.

dfn {
  // Add your styles.
}

// Italics
//
// The `<em>` element or the `<i>` element is used for emphasizing a snippet of
// text with italics.
//
// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
// technical terms, etc.

i,
em {
  // Add your styles.
}

// Inserted text
//
// The `<ins>` element indicates additions to the document.

ins {
  // Add your styles.
}

// Marked text
//
// The `<mark>` element highlights a run of text due to its relevance in another
// context.

mark {
  // Add your styles.
}

// Quote
//
// The `<q>` element represents an inline quote from another source. Longer
// quotes should use the `<blockquote>` element.

q {
  // Add your styles.
}

// Strikethrough text
//
// The `<s>` element indicates blocks of text that are no longer relevant.

s {
  // Add your styles.
}

// Small text
//
// For de-emphasizing inline or blocks of text, use the `<small>` element to set
// text at 80% the size of the parent.

small {
  // Add the correct font size in all browsers.
  @include font-size(s);
}

// Superscript / Subscript
//
// The `<sup>` element represents a superscript and the `<sub>` element
// represents a subscript.

sub,
sup {
  // Prevent `sub` and `sup` elements from affecting the line height in
  // all browsers.
  @include font-size(xs);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

// Underlined text
//
// To underline text use the `<u>` element. Not recommended since underlines are
// used by web browsers to style hyperlinks.

u {
  // Add your styles.
}