@mixin sidenote() {
    font-family: $font-text-secondary;
    clear: both;
    min-width: 5em;
    margin: 0 0 0.5em;
    padding: $line-height-default / 2;
    text-indent: 0;
    font-size: 1em * $font-size-smaller;
    line-height: $line-height-default * $font-size-smaller;
    font-style: inherit;
    position: relative;

    // Sidenotes only float to the right on screens
    // larger than the smallest break point
    @media only screen and (min-width: $break-width-small) {
        float: right;
        margin: 0 0 0.5em 0.5em;
        max-width: $max-width-default / 3;
    }

    @media only screen and (min-width: $break-width-large) {
        margin: 0 -10rem ($line-height-default / 2) 2rem;
    }

    // Very large screens, sidenotes can be as wide
    // as half of the content width area
    @media only screen and (min-width: #{$max-width-default * 2}) {
        max-width: $max-width-default / 2;
        margin-right: -(($max-width-default / 2) + 2rem);
    }

    // Don't text-indent paragraphs that follow sidenotes that follow a heading.
    // We allow for up to three sidenotes between the heading and paragraph.
    h1 + & + p,
    h2 + & + p,
    h3 + & + p,
    h4 + & + p,
    h5 + & + p,
    h6 + & + p,
    h1 + & + & + p,
    h2 + & + & + p,
    h3 + & + & + p,
    h4 + & + & + p,
    h5 + & + & + p,
    h6 + & + & + p,
    h1 + & + & + & + p,
    h2 + & + & + & + p,
    h3 + & + & + & + p,
    h4 + & + & + & + p,
    h5 + & + & + & + p,
    h6 + & + & + & + p {
        text-indent: 0;
    }
    // Unless we're spacing paras, add an indent
    // on paras that follow sidenotes that follow paras.
    p + & + p {
        text-indent: $paragraph-indent;
    }
    @if $spaced-paras {
        p + & + p {
            text-indent: 0;
        }
    }
    // If sidenotes are blockquotes, the text will be in a p,
    // so inherit appearance from .sidenote, not p
    & p {
        line-height: inherit;
        color: inherit;
    }
    // Some sidenotes are inside boxes and need different margins
    .box & {
        margin-right: -13.25em;
    }
    @media only screen and (max-width: $break-width-small) {
        .box & {
            margin-right: inherit;
        }
    }

    h1, h2, h3, h4, h5, h6 {

        &:first-child {
            margin-top: 0;
        }
    }

    p, ul, ol, dl {

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