@mixin linear-gradient($color1) {
    background: linear-gradient(-50deg, $white 50%, $color1 100%) no-repeat;
}

@mixin radial-gradient($color1) {
    background: radial-gradient(closest-side at 75% 75%, $white 10%, $color1 250%) no-repeat;
}

@mixin hero-gradient($color1) {
    background: linear-gradient(-25deg, transparent 15%, $color1 100%) no-repeat;
}

@mixin button-hover {
    overflow: hidden;

    span {
        position: relative;
        z-index: 1;
    }

    &:hover {
        &::after {
            right: -90%;
        }
    }

    &::after {
        content: '';
        position: absolute;
        width: 200%;
        height: 100%;
        top: 0;
        right: 110%;
        transform: skewX(35deg);
        background: $lighterblue;
        z-index: 0;
        transition: all ease .5s;
    }
}

@mixin parallax {
    .parallax-image {
        position: relative;
        height: 100%;

        .parallaxed {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: translateZ(-2px) scale(1.3);
            background-size: 100%;
            background-attachment: fixed;
            background-repeat: no-repeat;
            transition: all ease 1s;
            z-index: -1;
            background-size: auto;
            background-position: center;
        }
    }
}

@mixin background-opacity($color, $opacity: .3) {
    background: $color;
    background: rgba($color, $opacity);
}

@mixin global-arrow($border-width: 2px, $border-color: $brightyellow, $border-style: solid, $display:block,  $top: null, $right: null, $bottom: null, $left: null, $transform: null, $height: null, $width: null, $z-index: null, $position: relative) {
    border-bottom-style: $border-style;
    border-color: $border-color;
    border-right-style: $border-style;
    border-width: $border-width;
    bottom: $bottom;
    content: '';
    display: $display;
    height: $height;
    left: $left;
    position: $position;
    right: $right;
    top: $top;
    transform: $transform;
    width: $width;
    z-index: $z-index;
}

@mixin hero-height($height) {
    min-height: calc(#{$height} - 52px);
}

@mixin aspect-ratio($width, $height, $increment: 1, $content: false) {
    position: relative;

    &:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: (($height / $width) * $increment) * 100%;
    }

    @if $content {
         > .content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
}