typography.sass

%heading
    font-family: $heading-font-family
    margin-top: 0

h1, .h1
    @extend %heading
    font-size: $h1-size
    font-weight: $h1-weight
    line-height: $h1-line-height
    @include media-breakpoint-up(md)
        font-size: $h1-size-md

h2, .h2, .lead
    @extend %heading
    font-size: $h2-size
    font-weight: $h2-weight
    line-height: $h2-line-height
    @include media-breakpoint-up(md)
        font-size: $h2-size-md

h3, .h3
    @extend %heading
    font-size: $h3-size
    font-weight: $h3-weight
    line-height: $h3-line-height
    @include media-breakpoint-up(md)
        font-size: $h3-size-md

h4, .h4
    @extend %heading
    font-size: $h4-size
    font-weight: $h4-weight
    line-height: $h4-line-height
    @include media-breakpoint-up(md)
        font-size: $h4-size-md

h5, .h5
    @extend %heading
    font-size: $h5-size
    font-weight: $h5-weight

h6, .h6
    @extend %heading
    font-size: $h6-size
    font-weight: $h6-weight

h1, .h1,
h2, .h2
    a
        text-decoration-thickness: 0
        &:hover
            text-decoration-thickness: 1px

body
    font-family: $body-font-family
    -moz-osx-font-smoothing: grayscale
    -webkit-font-smoothing: antialiased
    font-size: $body-font-size
    font-variant-ligatures: common-ligatures
    text-rendering: optimizelegibility
    line-height: $line-height-base

p, .p,
li, .li
    margin-top: 0
    font-size: $body-font-size

small, .small
    font-size: $small-font-size

blockquote, .blockquote
    margin: 0
    cite
        font-size: px2rem(18)
        font-style: normal

address
    font-style: normal

a,
.link
    @include link
    overflow-wrap: break-word
    &[target="_blank"]:not(.icon)
        @include icon("link-blank", "after")
        &::after
            content: " #{map-get($icons, "link-blank")}"
            display: inline
            font-size: px2rem(10)
    &[href^="mailto"]
        &::after
            content: none

.btn
    font-size: $btn-font-size
    padding: $btn-padding-y $btn-padding-x
    text-decoration: none
    display: inline-block

.link-more
    @include link
    @include icon(arrow, before)
    &::before
        font-size: px2rem(10)
        margin-right: px2rem(5)

dd
    margin-bottom: 0.5rem
    margin-left: 0

::selection
    background: rgba($main-color, .7)
    color: $main-background-color
    text-shadow: none

*:focus-visible
    outline-color: gray
    outline-offset: 5px
    outline-style: dashed
    outline-width: 1px

@media (prefers-reduced-motion: no-preference)
    *:focus-visible
        transition: outline-offset .3s ease

// ICONS
@font-face
    font-display: block
    font-family: 'Icon'
    font-style: normal
    font-weight: 400
    src: url('../fonts/icons/icomoon.woff') format("woff")

@each $name, $glyph in $icons
    .icon-#{$name}
        @include icon($name, before)
    .btn-#{$name}
        @include icon($name)
        &::before
            margin-inline-end: px2rem(5)