Button

.button {
    background-color: transparent;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 0;
    display: inline-block;
    padding: $padding-button;
    text-decoration: none;
    text-align: center;
    line-height: $font-lineheight-s;
    transition: all .2s cubic-bezier(.28,.48,.58,.86);
    font-family: $font-primary;
    cursor: pointer;

    @include mediaWQuery($media-query-s) {
        width: auto;
    }

    @include mediaWQuery($media-query-m) {
        padding: $margin-s*1.5 $margin-l;
        font-size: rem(21);
    }

    &.button--black{
        background-color: $c-button-black;
        border-color: $c-button-black;
        color: $c-white;

        &:hover,
        &:active,
        &:focus{
            background-color: $c-button-black-hover;
            border-color: $c-button-black-hover;
        }
    }

    &.button--gray{
        background-color: $c-button-gray;
        border-color: $c-button-gray;
        color: $c-button-text;

        &:hover,
        &:active,
        &:focus{
            background-color: $c-button-gray-hover;
            border-color: $c-button-gray-hover;
        }
    }

    &.button--white{
        background-color: $c-button-white;
        border-color: $c-button-white;
        color: $c-button-text;
        font-weight: 700;

        &:hover,
        &:active,
        &:focus{
            background-color: $c-button-white-hover;
            border-color: $c-button-white-hover;
        }
    }

    &.button--gold {
        background-color: $c-gold-medium;
        border-color: $c-gold-medium;
        color: $c-white;

        &:hover,
        &:active,
        &:focus{
            background-color: darken($c-gold-medium, 10%);
            border-color: darken($c-gold-medium, 10%);
        }
    }

    &.button--larger {
        @include mediaWQuery($media-query-m) {
            padding-left: 4rem;
            padding-right: 4rem;
        }
    }

    &.button--gradient{
        background-image: $c-button-gradient;
        border-color: $c-button-gradient-border;
        color: $c-button-text;
        background-size: auto 200%;

        &:hover,
        &:active,
        &:focus{
            background-position: bottom center;
            //background-image: $c-button-gradient-hover;
            //box-shadow: 0 0 0 8px colorFade($c-button-gradient-border, .4);
        }
    }

    &.button--full-width {
        display: block;
        width: 100%;
    } 

    &.button--rounded {
        border-radius: $border-radius-button;
    }

    &.button--center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    // LINEAR BUTTON used for Read More link
    &.button--linear {
        display: block;
        color: $c-button-text;
        padding: $padding-button-linear;
        font-family: $font-button-linear;
        text-transform: uppercase;
        text-align: center;

        @include mediaWQuery($media-query-m) {
            text-align: initial;
            &-left {
                &::before {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    width: 50px;
                    height: 1px;
                    background: $c-button-text;
                    margin-right: .5rem;
                    @include transition;
                }
    
                &:hover, &:focus {
                    &::before {
                        width: 60px;
                    }
                }
            }
    
            &-right {
                display: block;
                text-align: right;
                &::after {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    width: 50px;
                    height: 1px;
                    background: $c-button-text;
                    margin-left: .5rem;
                    @include transition;
                }
    
                &:hover, &:focus {
                    &::after {
                        width: 60px;
                    }
                }
            }
        }

        
    }

    &--unstyled {
        margin: 0;
        padding: 0;
        border: 0;
        -webkit-appearance: none;
        background: transparent;
        cursor: pointer;
    }

    &.is-loading {
        &::before {
            content: '';
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 5px;
            margin-top: -4px;
            vertical-align: middle;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' style='margin:auto%3Bbackground: transparent 0%25 0%25' width='200' height='200' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' display='block'%3E%3Ccircle cx='50' cy='50' fill='none' stroke='%23fff' stroke-width='10' r='35' stroke-dasharray='164.93361431346415 56.97787143782138'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' values='0 50 50%3B360 50 50' keyTimes='0%3B1'/%3E%3C/circle%3E%3C/svg%3E");
        }
    }
}

@keyframes rotate {
    to { transform: rotate(360deg) }
}