@mixin vertical-gradient($top, $bottom) {
    background: $top;
    background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, $top),
        color-stop(100%, $bottom)
    );
    background: -webkit-linear-gradient(top, $top 0%, $bottom 100%);
    background: -o-linear-gradient(top, $top 0%, $bottom 100%);
    background: -ms-linear-gradient(top, $top 0%, $bottom 100%);
    background: linear-gradient(top, $top 0%, $bottom 100%);
}

@mixin horizontal-gradient($top, $bottom) {
    background: $top;
    background: -moz-linear-gradient(left, $top 0%, $bottom 100%);
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0%, $top),
        color-stop(100%, $bottom)
    );
    background: -webkit-linear-gradient(left, $top 0%, $bottom 100%);
    background: -o-linear-gradient(left, $top 0%, $bottom 100%);
    background: -ms-linear-gradient(left, $top 0%, $bottom 100%);
    background: linear-gradient(left, $top 0%, $bottom 100%);
}

@mixin radial-gradient($outer, $inner, $type: circle) {
    background: $outer;
    background: -moz-radial-gradient(
        center,
        $type cover,
        $inner 0%,
        $outer 100%
    );
    background: -webkit-gradient(
        radial,
        center center,
        0px,
        center center,
        100%,
        color-stop(0%, $inner),
        color-stop(100%, $outer)
    );
    background: -webkit-radial-gradient(
        center,
        $type cover,
        $inner 0%,
        $outer 100%
    );
    background: -o-radial-gradient(center, $type cover, $inner 0%, $outer 100%);
    background: -ms-radial-gradient(
        center,
        $type cover,
        $inner 0%,
        $outer 100%
    );
    background: radial-gradient(center, $type cover, $inner 0%, $outer 100%);
}

@mixin light-bg-text-color($color) {
    section.has-light-background {
        &,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: $color;
        }
    }
}

@mixin dark-bg-text-color($color) {
    section.has-dark-background {
        &,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: $color;
        }
    }
}
