/*! Typebase.scss v0.1.0 | MIT License */

// Import of the math.div function for slash as division change
@use "sass:math";

// Typesetting variables. Edit here or override in main file prior to import of this.
$baseFontSize:22 !default; // in pixels. This would result in 22px on desktop
$baseLineHeight:1.5 !default; // how large the line height is as a multiple of font size
$leading:$baseLineHeight * 1rem !default;
// Rate of growth for headings
// I actually like this to be slightly smaller then the leading. Makes for tight headings.
$scale:1.414 !default;

/* Setup */

html {
    /* Change default typefaces here */
    font-family: serif;
    font-size: math.div($baseFontSize, 16) * 100%;
    // Make everything look a little nicer in webkit
    -webkit-font-smoothing: antialiased;
    // -webkit-text-size-adjust: auto
    // -moz-text-size-adjust: auto
    // -ms-text-size-adjust: auto
    // -o-text-size-adjust: auto
    // text-size-adjust: auto

}
/* Copy & Lists */

p {
    line-height: $leading;
    margin-top: $leading;
    margin-bottom: 0;
}
ul,
ol {
    margin-top: $leading;
    margin-bottom: $leading;
    li {
        line-height: $leading;
    }
    ul,
    ol {
        margin-top: 0;
        margin-bottom: 0;
    }
}
blockquote {
    line-height: $leading;
    margin-top: $leading;
    margin-bottom: $leading;
}
/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Change heading typefaces here */
    font-family: sans-serif;
    margin-top: $leading;
    margin-bottom: 0;
    line-height: $leading;
}
h1 {
    font-size: 3 * $scale * 1rem;
    line-height: 3 * $leading;
    margin-top: 2 * $leading;
}
h2 {
    font-size: 2 * $scale * 1rem;
    line-height: 2 * $leading;
    margin-top: 2 * $leading;
}
h3 {
    font-size: 1 * $scale * 1rem;
}
h4 {
    font-size: math.div($scale, 2) * 1rem;
}
h5 {
    font-size: math.div($scale, 3) * 1rem;
}
h6 {
    font-size: math.div($scale, 4) * 1rem;
}
/* Tables */

table {
    margin-top: $leading;
    border-spacing: 0px;
    border-collapse: collapse;
}
td,
th {
    padding: 0;
    line-height: $baseLineHeight * $baseFontSize - 0px;
}
/* Code blocks */

code {
    // Forces text to constrain to the line-height. Not ideal, but works.
    vertical-align: bottom;
}
/* Leading paragraph text */

.lead {
    font-size: $scale * 1rem;
}
/* Hug a the block above you */

.hug {
    margin-top: 0;
}