// Use this on every new component
// It sets up the base font size
// and resets for all elements inside that component
// Example:
//  .myContainer {
//      @include scaffold;
//      -- Other styles here
//  }

@mixin scaffold() {
    &, p {
        font-family: $font-family-base;
        font-size: $font-size-base;
        line-height: $line-height-base;
        color: $text-color;
    }

    * {
        box-sizing: border-box;
    }
    *:before,
    *:after {
        box-sizing: border-box;
    }

    input,
    button,
    select,
    textarea {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    a {
        color: $link-color;
        text-decoration: none;

        &:hover,
        &:focus {
            color: $link-hover-color;
            text-decoration: $link-hover-decoration;
        }

        &:focus {
            @include tab-focus;
        }
    }

    h1,
    h2,
    h3,
    h4,
    p,
    blockquote,
    figure {
        margin: 0;
        padding: 0;
    }
    main {
        display: block;
    }
    h1,
    h2,
    h3,
    h4 {
        font-size: inherit;
    }
    strong {
        font-weight: bold;
    }
    a,
    button {
        color: inherit;
        transition: .3s;
    }
    a {
        text-decoration: none;
    }
    button {
        overflow: visible;
        border: 0;
        font: inherit;
        -webkit-font-smoothing: inherit;
        letter-spacing: inherit;
        background: none;
        cursor: pointer;
    }
    ::-moz-focus-inner {
        padding: 0;
        border: 0;
    }
    :focus {
        outline: 0;
    }
    img {
        max-width: 100%;
        height: auto;
        border: 0;
    }
}