////
/// Very basic styles
////

html,
body {
  box-sizing: border-box;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

// Images
// -------------------------

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

// We need to revert these for Google maps cause else it breaks!
%img--no-max,
.img--no-max {
  max-width: none;
}


// Figures
// -------------------------

figure > img {
  display: block;
}

figcaption {
  font-size: $smaller;
}

// iFrame
// -------------------------


iframe,
embed,
object,
video {
  max-width: 100%;
}

// Links
// -------------------------

a {
  text-decoration: underline;
  color: $link-color;
  &:visited {
    color: $link-color;
  }
  &:hover {
    text-decoration: none;
  }
  &:focus {
    outline: thin dotted;
  }
  &:hover, &:active {
    outline: none;
  }
}

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

ul,ol {
  margin-bottom: $base-line;
  li {
    margin-bottom: 0.5rem;
  }
}

// List options
// -------------------------

// Unstyled keeps list items block level, just removes default browser padding and list-style
.list-unstyled {
  padding-left: 0;
  list-style: none;
}

// Inline turns list items into inline-block
.list-inline {
  @extend .list-unstyled;

  > li {
    display: inline-block;
    margin: 0 -5px 0 0;
  }
}

// Description Lists
// -------------------------

dl {
  margin-top: 0; // Remove browser default
  margin-bottom: $base-line;
}

dt,
dd {
  line-height: $line-height-base;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0; // Undo browser default
}

// Blockquotes
// -------------------------

blockquote,
blockquote p,
q {
  color: $color-grey;
}

blockquote {
  padding-left: $base-line / 2;
  font-size: $base-em * $ms1;
  letter-spacing: -1px;
  border-left: 4px solid $color-grey;
  > :last-child {
    margin-bottom: 0;
  }
}

blockquote cite {
  display: block;
  color: $color-grey-dark;
}

blockquote cite:before {
  content: "\2014 \0020";
}

blockquote cite a,
blockquote cite a:visited {
  color: $color-grey-dark;
}


// Code formatting
// -------------------------

pre,
code {
  font-size: 15px;
  border: 1px solid $color-grey-light;
  border-radius: 3px;
  background-color: #eef;
}

code {
  padding: 1px 5px;
}

pre {
  overflow-x: scroll;
  padding: 8px 12px;
  > code {
    padding-right: 0;
    padding-left: 0;
    border: 0;
  }
}

table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid #ccc;
  > thead, > tbody, > tfoot {
    > tr {
      > th, > td {
        border: 1px solid #ccc;
      }
    }
  }
  > thead > tr {
    > th, > td {
      border-bottom-width: 2px;
    }
  }
}