@import 'variables'
@import 'themes/heb_dark'

@import 'fonts'
@import 'mixins'

@import 'tables'

@warn "the value of $primary-font is #{$primary-font}"

// Base body styles
body
  font-family: $primary-font
  font-size: 16px
  line-height: 1.6
  color: $text-color
  background-color: $background-color

// Headers
@each $header, $props in $header-styles
  #{$header}
    font-family: $secondary-font
    font-weight: bold
    color: map-get($props, color)
    font-size: map-get($props, size)
    margin-top: 20px
    margin-bottom: 10px

// Default Link Style (Primary)
a
  @include link-primary

// Specific Link Styles
a.secondary
  @include link-secondary

a.inverse
  @include link-inverse

h4 a
  margin-left: 2em
  @include link-secondary

// Tables
table
  width: 100%
  border-collapse: collapse
  margin: 20px 0
  font-size: 14px

th, td
  padding: $table-padding
  text-align: left
  border-bottom: 1px solid $table-border-color

th
  background-color: $table-header-bg
  color: white

tr:nth-child(even)
  background-color: lighten($table-border-color, 20%)

// Special Classes
.positives-negatives
  th, td
    text-align: center
    padding: 12px
  tr:nth-child(even)
    background-color: lighten($tertiary-color, 30%)
  th
    background-color: $tertiary-color
    color: white

.tax-bracket
  th, td
    padding: 8px
    text-align: right
  th
    background-color: $primary-color
    color: white

.ip-recap
  th, td
    padding: 10px
    text-align: left
  th
    background-color: $quaternary-color
    color: white

// Code Blocks
pre, code
  background-color: $code-bg-color
  padding: 10px
  border-radius: $code-border-radius
  font-family: $primary-font
  color: $code-font-color
  overflow-x: auto
  font-size: 14px

// Lists
ul, ol
  margin-left: $list-padding-left
  padding-left: $list-padding-left
  list-style-position: inside

li
  margin-bottom: 5px

img
  width: 20em

div#postamble
  border-color: $tertiary-color