social-pickup/_share/media/sass/pickup.sass

@use "sass:map"
@use "sass:color"
@use 'variables' as * 
@use 'fonts' as fonts
@use '../../../../../_share/media/sass/mixins' as mixins-basic

@include mixins-basic.set-header-sizes($default-header-sizes)
@include mixins-basic.set-header-colors($default-header-colors)
@include mixins-basic.set-header-margins-sides($default-header-margins-sides)
@include mixins-basic.set-header-margins-vertical($default-header-margins-vertical)

/* Base Styles */
body
  font-family: $primary-font
  font-size: 1em
  line-height: 1.6

  color: $text-color
  background-color: $background-color

  margin: 0 auto
  max-width: 900px
  padding: 1em

/* Link Styles */
a
  color: $anchor-color
  text-decoration: underline
  text-underline-offset: 2px

  &:hover
    color: $anchor-hover-color

// Lists
ul, ol
  padding-left: $list-padding-left

ul
  margin: 1em 0em
  list-style-type: disc

ol
  margin: 1em .5em
  list-style-type: decimal

li
  margin-bottom: 0.5em

// Blockquotes
blockquote
  border-left: 4px solid $secondary-color
  padding-left: 1em
  color: color.adjust($text-color, $lightness: 10%)
  margin: 1.5em 0

  font-family: $secondary-font

// Tables
table
  width: 100%
  border-collapse: collapse
  margin-bottom: 1em
  color: $text-color

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

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

tr:nth-child(even)
  background-color: color.adjust($background-color, $lightness: 5%)

/* Code Block Styles */
pre, code
  background-color: $code-background-color
  color: $code-text-color

  font-family: $secondary-font

  border-radius: 4px
  padding: 0.5em
  display: block
  overflow-x: auto

// Section
section
  margin-bottom: 2em

/* Header Styles */
h1, h2, h3, h4, h5, h6
  text-transform: capitalize
  font-family: $secondary-font
  font-weight: bold

h3 
  a
    color: color.adjust($anchor-color, $lightness: -12%)
    &:hover
      text-decoration: none
      color: color.adjust($anchor-hover-color, $lightness: -12%)

// Paragraphs
p
  margin-bottom: 1em

// Notes
.note
  background-color: $note-background-color
  padding: 0.5em
  border-left: 3px solid $note-border-color
  margin-bottom: 1em
  color: $text-color

div#postamble
  border-top: 1px dashed $note-border-color
  margin-top: 2em
  padding-top: 1em
  color: color.adjust($note-border-color, $lightness: 20%)
  font-size: 0.9em

.outline-text-3
  margin-left: .5em

.outline-text-4
  margin-left: .5em

/* Table of Contents Link */
.toc
  font-weight: bold
  color: $primary-color

ul.links
  list-style-type: square
  li
    margin: 0

  a
    text-transform: capitalize

ul.contents-overview
  margin-top: 0em
  list-style-type: square

  li
    margin: 0

  a
    font-weight: 500
    text-transform: uppercase
    text-underline-offset: 6px

div#table-of-contents
  ul
    margin: 0
    list-style-type: none 

    li
      margin: .4 0

      a
        color: $toc-anchor-color
        text-transform: lowercase
        text-decoration: none

        &:hover
          color: $toc-anchor-hover-color

  h2
    margin-left: 0
    margin-bottom: .2em 
    text-transform: uppercase