@use "sass:map"
@use "sass:color"

@use 'themes/course_listings/dark' as theme
@use 'mixins'
@use 'collapsible'

@include mixins.toggle-section-numbers(h4, false)
@include mixins.remove-section-number(h2)

// @include set-header-sizes($default-header-sizes)
// @include set-header-color($text-color)

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

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

div#postamble
  border-color: theme.$text-color

a
  color: theme.$anchor-color
  text-decoration: none

  &:hover
    color: theme.$anchor-hover-color
    border-bottom-color: theme.$anchor-hover-color
    text-decoration: underline

h2
  margin-top: 1.5em

h3
  margin-top: 2em
  margin-left: 1em
  border-bottom: solid 1px get-header-property(h3, 'color')


h3 + .outline-text-3 p
  margin-top: 0

h3 + .outline-text-3 p > a:first-of-type
  font-size: 1em
  margin-left: theme.$first-anchor-margin-left

h4
  text-transform: uppercase
  padding-left: 2em
  margin-top: 0

h4 + .outline-text-4 ol, h4 + .outline-text-4 ul
  padding-left: 4em

  a
    color: #a19581
    text-decoration: none

    &:hover
      color: #ffad42  // A warm, light orange that pairs well with the yellow marker
      border-bottom-color: #ffad42
      text-decoration: underline

  li
    &::marker

      color: #8b872b
      font-size: 1.2em
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)

    b
      font-family: arial-black
      font-size: .7em
      text-transform: uppercase
      padding-left: 2em
      
      color: #c5b06a

ul.notes
  list-style-type: square
  padding-left: 3em

  ul.desc-link
    li
      margin-bottom: .2em // Add space between list items


      > a
        display: block


ul.explanation
  list-style-type: none
  margin-left: 2em
  margin-top: 0
  margin-bottom: 1.5em

  li

    // color: darken(theme.$primary-color, 10)
    color: color.adjust(theme.$primary-color, $lightness: -10%)
    font-weight: bold
    font-family: theme.$secondary-font
    text-transform: uppercase
    font-size: .9rem

    a
      text-transform: none
      font-weight: normal
      color: theme.$anchor-secondary-color

      &:hover
        color: theme.$anchor-secondary-hover-color
/*
    &:not(a)
      color: darken($primary-color, 10)
      font-weight: bold
      font-family: $secondary-font
      text-transform: lowercase

ul.toc
  list-style-type: none
  padding-left: 2em
  margin-top: 0
  margin-bottom: 0

  li
    a
      text-transform: uppercase 
      font-weight: bold
      font-size: 1rem
      font-family: theme.$secondary-font
      color: theme.$tertiary-color
      color: color.adjust(theme.$quinary-color, $lightness: 5%)
      text-transform: uppercase

      &:hover
        // color: lighten($quinary-color, 10)
        color: color.adjust(theme.$quinary-color, $lightness: 5%)
      &::after
        content: " Notes"