%button {

position: relative;
border: none;
box-shadow: none;
vertical-align: middle;
border-radius: $global-radius;
background: $ace-navy;
color: $white;
font-size: rem-calc(16);
margin-bottom: 0;
line-height: 1;
padding: rem-calc(8 30 8 8);
@include breakpoint(tablet) {
        padding: rem-calc(12 40 12 12);
}
&:not(.loading):after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: rem-calc(8);
        bottom: 0;
        height: rem-calc(15);
        width: rem-calc(8);
        margin: auto;
        background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20id%3D%22Chevron%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2012%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-3%7Bfill%3Anone%3B%7D.cls-2%7Bclip-path%3Aurl(%23clip-path)%3B%7D.cls-3%7Bstroke%3A%2398c21f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A3.38px%3B%7D%3C%2Fstyle%3E%3CclipPath%20id%3D%22clip-path%22%3E%3Crect%20class%3D%22cls-1%22%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2211%22%20height%3D%2218%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Ctitle%3EChevron%3C%2Ftitle%3E%3Cg%20class%3D%22cls-2%22%3E%3Cpolyline%20class%3D%22cls-3%22%20points%3D%222.19%2017.37%209.81%2010%202.19%202.63%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        @include breakpoint(tablet) {
                right: rem-calc(12);
                height: rem-calc(20);
                width: rem-calc(12);
        }
}
&:hover, &:focus {
        background: $ace-navy-h;
        color: $white;
}
&.button-white {
        background: $white;
        color: $ace-navy;
        &:hover, &:focus {
                background: $light-gray;
        }
}
&.button-large {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: rem-calc(20);
        @include breakpoint(medium) {
                margin-top: 1rem;
                margin-bottom: 1rem;
                font-size: rem-calc(24);
        }
}

}

.button {

@extend %button;

}

.donate-button {

a {
        display: inline-block;
        position: relative;
        background: linear-gradient(#bd8e9f, #9f5976);
        font-size: rem-calc(26);
        color: $white;
        text-transform: uppercase;
        line-height: 1.2;
        padding: rem-calc(12 16 5);
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        overflow: hidden;
        span {
                position: relative;
                display: block;
                text-align: center;
                z-index: 2;
        }
        &:not(.loading):after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: linear-gradient(#cc98ab, $ace-pink);
                opacity: 1;
                z-index: 1;
        }
        &:hover, &:focus {
                &:not(.loading):after {
                        opacity: 0;
                }
        }
}

}