.muted   { color: $muted-text-color; }
.warning { color: $warning-text-color; }

@mixin small-text {
    font-size: $small-font-size; line-height: $small-line-height;
}
.small { @include small-text; }
.center { text-align: center; margin-left: auto; margin-right: auto; }



/**
 * Reset some basic elements
 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, figure {
    margin:  0;
    padding: 0;
}



/**
 * Basic styling
 */
html {
    font-family: $base-font-family;
    font-size:   $base-font-size; 
    line-height: $base-line-height;
    font-weight: $base-font-weight;
}

body {
    color:                         $text-color;
    background-color:              $background-color;
    -webkit-text-size-adjust:      100%;
    -webkit-font-feature-settings: "kern" 1;
    -moz-font-feature-settings:    "kern" 1;
    -o-font-feature-settings:      "kern" 1;
    font-feature-settings:         "kern" 1;
    font-kerning:                  normal;
}



/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm { margin-bottom: $spacing-unit / 2; }



/**
 * Articles
 */
article {
    @include media-query($on-palm) { 
        padding: 1em 1em 0.3em;
        font-size: $small-font-size;
    }
}



/**
 * Divider
 */
hr { 
    margin: 2.4rem auto; 
    width:  66%;
    border: 1px solid $grey-color-light;
}



/**
 * Images
 */
img {
    max-width:      100%;
    vertical-align: middle;
}



/**
 * Figures
 */
figure {
    background: #fff;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.025);
    padding:    0.5em;
}

figure > img {
    display: block;
}

figcaption {
    color:       $muted-text-color;
    font-size:   16px;
    font-style:  italic;
    line-height: 1.2;
    margin:      1em 0.5em 0.5em;
    text-align:  center;
}



/**
 * Lists
 */
ul, ol {
    margin-left: $spacing-unit;
}

li {
    > ul, > ol { margin-bottom: 0; }
}



/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
    line-height: initial;
    font-weight: $base-font-weight;
}



/**
 * Links
 */
a {
    color:           $accent-color;
    text-decoration: none;
    &:hover {
        color:           darken($accent-color, 10%);
        text-decoration: none;
    }
}



/**
 * Blockquotes
 */
blockquote {
    background-color: $highlight-bg-color;
    border-left:      4px solid $grey-color-light;
    padding:          $spacing-unit / 2;

    > :last-child { margin-bottom: 0; }
}



/**
 * Code formatting
 */
pre, code {
    font-size:        15px;
    border:           1px solid $grey-color-light;
    border-radius:    3px;
    background-color: #eef;
}

code {
    padding: 1px 5px;
}

pre {
    padding:    8px 12px;
    overflow-x: auto;

    > code {
        border:        0;
        padding-right: 0;
        padding-left:  0;
    }
}



/**
 * Wrapper
 */
.wrapper {
    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
    max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
    margin-right:  auto;
    margin-left:   auto;
    padding-right: $spacing-unit;
    padding-left:  $spacing-unit;
    @extend %clearfix;

    @include media-query($on-laptop) {
        max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
        max-width:         calc(#{$content-width} - (#{$spacing-unit}));
        padding-right: $spacing-unit / 2;
        padding-left:  $spacing-unit / 2;
    }
}



/**
 * Clearfix
 */
%clearfix {
    &:after {
        content: "";
        display: table;
        clear:   both;
    }
}



/**
 * Icons
 */
.icon {
    > svg {
        display:        inline-block;
        width:          16px;
        height:         16px;
        vertical-align: middle;
        margin-right:   0.2em;
    }
}
