//
// Typography
// --------------------------------------------------

//
// Horizontal rules
//

hr {
  margin-top: $spacer-y;
  margin-bottom: $spacer-y;
  border: 0;
  border-top: $border-width solid $hr-border-color;
}

//
// Emphasis
//

small,
.small {
  font-size: $font-size-sm;
  font-weight: normal;
}

.small-xs {
  font-size: $font-size-xs;
}

mark,
.mark {
  background: $alert-warning-bg;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

// Lists
// --------------------------------------------------

// Unordered and Ordered lists
ul,
ol {
  padding: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
li {
  line-height: $line-height-base;
}

// Remove default list styles
ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

// Single-line list items
ul.inline,
ol.inline {
  margin-left: 0;
  list-style: none;
  > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
  }
}

// Description Lists
dl {
  margin-bottom: $line-height-base;
}
dt,
dd {
  line-height: $line-height-base;
}
dt {
  font-weight: $font-weight-semi-bold;
}
dd {
  margin-left: calc($line-height-base / 2);
}
// Horizontal layout (like forms)
.dl-horizontal {
  @include clearfix();
  dt {
    float: left;
    width: $horizontalComponentOffset - 20;
    clear: left;
    text-align: right;
    @include text-overflow();
  }
  dd {
    margin-left: $horizontalComponentOffset;
  }
}

// MISC
// ----

// Abbreviations and acronyms
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted $abbr-border-color;
}

abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

// Blockquotes
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 $line-height-base;
  border-left: 5px solid $gray-3;
  p {
    margin-bottom: 0;
    font-size: $font-size-base * 1.25;
    font-weight: 300;
    line-height: 1.25;
  }
  small {
    display: block;
    line-height: $line-height-base;
    color: $gray-2;
    &:before {
      content: '\2014 \00A0';
    }
  }

  // Float right with text-align: right
  &.pull-right {
    float: right;
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid $gray-3;
    border-left: 0;
    p,
    small {
      text-align: right;
    }
    small {
      &:before {
        content: '';
      }
      &:after {
        content: '\00A0 \2014';
      }
    }
  }
}

// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: '';
}

// Addresses
address {
  display: block;
  margin-bottom: $line-height-base;
  font-style: normal;
  line-height: $line-height-base;
}

a.external-link {
  color: $external-link-color;
  text-decoration: normal;

  &:hover {
    color: $external-link-color;
    text-decoration: underline;
  }
}

.link {
  color: $link-color;
  cursor: pointer;
}

.link:hover {
  color: $link-hover-color;
}

.pointer {
  cursor: pointer;
}

.markdown-html {
  img {
    max-width: 100%;
  }

  ul,
  ol {
    padding-left: $spacer * 1.5;
    margin-bottom: $spacer;
  }

  table {
    margin-bottom: $spacer;
  }

  table {
    td,
    th {
      padding: $space-xs $space-sm;
    }
    th {
      font-weight: $font-weight-semi-bold;
      background: $table-bg-accent;
    }
  }

  table,
  th,
  td {
    border: 1px solid $table-border;
    border-collapse: collapse;
  }

  a {
    color: $external-link-color;
    text-decoration: none;

    &:hover {
      color: $external-link-color;
      text-decoration: underline;
    }
  }

  p:last-child {
    margin-bottom: 0;
  }

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

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

th {
  font-weight: $font-weight-semi-bold;
}

canvas {
  display: block;
}