/* ----------------------------- */
/* ==Base (basic styles)         */
/* ----------------------------- */

/* switching to border-box model for all elements */
html
  box-sizing border-box

*
  box-sizing inherit

html
  /* set base font-size to equiv "10px", which is adapted to rem unit */
  font-size 62.5%
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  /* thanks to @guardian, @victorbritopro and @eQRoeil */
  font-size calc(1em * 0.625)

body
  font-size $base-font-size
  background-color $base-background
  color $base-color
  font-family $font-stack-common
  line-height $line-height

a
  color $link-color

  // No styling on focus/hover if there's no effect. Avoids to then have to
  // override it countless times. See Issue #232
  if $link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
    &:focus,
    &:hover,
    &:active
      color $link-hover-color

ul
ol
  padding-left 2em

img
  vertical-align middle

blockquote
figure
  margin-left 0
  margin-right 0

/* font-sizing for content */
p
.{$kna-namespace}p-like
ul
ol
dl
blockquote
pre
td
th
label
textarea
caption
details
figure
  margin-top 0.75em
  margin-bottom 0
  line-height $line-height

h1 .{$kna-namespace}h1-like
  font-size $h1-size
  if $font-stack-headings is defined && $font-stack-headings != $font-stack-common
    font-family $font-stack-headings

h2 .{$kna-namespace}h2-like
  font-size $h2-size
  if $font-stack-headings is defined && $font-stack-headings != $font-stack-common
    font-family $font-stack-headings

h3 .{$kna-namespace}h3-like
  font-size $h3-size

h4 .{$kna-namespace}h4-like
  font-size $h4-size

h5 .{$kna-namespace}h5-like
  font-size $h5-size

h6 .{$kna-namespace}h6-like
  font-size $h6-size

/* alternate font-sizing */
.{$kna-namespace}smaller
  font-size 0.6em

.{$kna-namespace}small
  font-size 0.8em

.{$kna-namespace}big
  font-size 1.2em

.{$kna-namespace}bigger
  font-size: 1.5em

.{$kna-namespace}biggest
  font-size 2em

code
pre
samp
kbd
  /* IE fix */
  white-space pre-line
  white-space pre-wrap
  font-family $font-stack-monospace
  line-height normal

em
.{$kna-namespace}italic
address
cite
i
var
  font-style italic

/* avoid top margins on first content element */
p
.{$kna-namespace}p-like
ul
ol
dl
blockquote
pre
h1
.{$kna-namespace}h1-like
h2
.{$kna-namespace}h2-like
h3
.{$kna-namespace}h3-like
h4
.{$kna-namespace}h4-like
h5
.{$kna-namespace}h5-like
h6
.{$kna-namespace}h6-like
  &:first-child
    margin-top 0

/* avoid margins on nested elements */
li p
li .{$kna-namespace}p-like
li ul
li ol
  margin-top 0
  margin-bottom 0

/* max values */
img
table
td
blockquote
code
pre
textarea
input
video
svg
  max-width 100%

img
  height auto