/**
 * Defines the strategy for `h1` and `h2`
 * Either `prefix` for `#` and `##`
 * or `underliner` for `===` and `---`
 * @type String
 */
$h1-h2-strategy: 'underline';

/**
 * Defines the emphasize strategy for `em` and `strong`
 * Either `*`  for `*...*` and `**...**`
 * or `_` for `_..._` and `__...__`
 * @type String
 */
$em-strong-strategy: '*';

/**
 * Ordered list strategy
 * Either `manual` for `1. 2. 3.`
 * or `automatic` for `1. 1. 1.`
 * @type String
 */
$ol-strategy: 'manual';

/**
 * Unordered list strategy
 * Either `*`, or `-` or `+`
 * @type String
 */
$ul-strategy: '*';

/**
 * Horizontal rules strategy
 * Either `-` for `---`
 * or `*` for `***`
 * @type String
 */
$hr-strategy: '-';

/**
 * Baseline
 * Defines global `line-height` and `margin`
 * @type Number
 */
$baseline: 1.5;

/**
 * Font styles
 * @type List
 * @requires $baseline
 */
$font-style: 16px/#{$baseline} Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;

/**
 * Resetting everything
 * Since Markdown is nothing but text
 * We put the text cursor all over the place
 */
* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-style: normal;
  cursor: text;
}

/**
 * Giving some nice looking IDE font styles
 * Padding is here to make it easier to read 
 * preventing content from hitting the edges
 */
body {
  padding: 1em;
  font: $font-style;
}

/**
 * Mandatory line breaks
 */
ul, ol, p, hr, pre, #{headings()} {
  margin: ($baseline * 1em) 0;
}

/**
 * Headings
 */
@if ($h1-h2-strategy == 'underline') {
  h1::after,
  h2::after {
    display: block;
  }
  
  h1::after { content: '==='; }
  h2::after { content: '---'; }
} @else {
  h1::before { content: '# '; }
  h2::before { content: '## '; }
}

h3::before { content: '### '; }
h4::before { content: '#### '; }
h5::before { content: '##### '; }
h6::before { content: '###### '; }

/**
 * Em tags
 */
em::before,
em::after { 
  content: quote($em-strong-strategy);
}

/**
 * Strong tags
 */
strong::before,
strong::after { 
  content: quote($em-strong-strategy + $em-strong-strategy);
}

/**
 * Code tags
 * Only add backticks
 * when code is not inside a pre
 */
code {
  font: $font-style;
}

:not(pre) > code::before,
:not(pre) > code::after {
  content: '`';
}

/**
 * Links
 * Resetting styles:
 * text-decoration, color
 */
a {
  color: inherit;
  text-decoration: none;

  &::before {
    content: '[';
  }

  &::after {
    content: '](' attr(href) ')';
  }
}

/**
 * Horizontal rules
 * Hiding the rule
 * then display three hyphens
 */
hr {
  border: none;

  &::before {
    content: quote($hr-strategy + $hr-strategy + $hr-strategy);
  }
}

/**
 * Code blocks
 * Could work with indent as well
 */
pre::before,
pre::after {
  content: '```';
  display: block;
}

/**
 * Ordered lists
 */
@if ($ol-strategy == 'automatic') {
  ol {
    list-style: none;
  
    li::before {
      content: '1. ';
    }
  }
} @else {
  ol {
    list-style-position: inside;
    list-style-type: decimal;
  }
}

/**
 * Unordered lists
 * 1. One space if supported, else `em`
 */
ul {
  list-style: none; 

  li::before { 
    content: quote($ul-strategy);
    margin-right: .5em; /* 1 */
    margin-right: 1ch; /* 1 */
  }
}

/**
 * Image tags
 * Weird hack to prevent the image from being displayed
 */
img {
  content: '';

  &::before {
    content: '![' attr(alt) '](' attr(src) ')';
  }
}

/**
 * Blockquote
 * Add a chevron to first item of blockquote
 * usually a paragraph
 */
blockquote :first-child::before {
  content: '> ';
}

/**
 * Checkbox
 * 1. Overrides UA styles
 */
input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  &:focus {
    outline: none;
  }
  
  &::before {
    content: '[ ]';
    font: $font-style; /* 1 */
  }
  
  &:checked::before {
    content: '[x]';
  }
}