@charset "UTF-8";

@mixin btnTheme($color) {
    background-color: $color;
    color: $white;
    &.btn--outline {
        background-color: transparent;
        border-color: $color;
        color: $font-color;
    }
    &:focus,
    &:hover,
    &:active {
        background-color: rgba($color, .8);

        &.btn--outline {
            background-color: rgba($color, .2);
        }
    }
}

.btn {
    margin: .5rem 0;
    padding: 1rem 1.5rem;
    font-size: 1.6rem;
    line-height: normal;
    border: .2rem solid transparent;
    border-radius: .3rem;
    font-weight: normal;

    &--primary {
        @include btnTheme($primary_color);
    }
    &--black-text {
        color:black;
    }
    &--purple {
        background-color:$pale-purple;
    }

    &--alert {
        @include btnTheme($red);
    }

    &--small {
        padding: .75rem 1.25rem;
    }

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

    &--mini {
        background-color: $mini-button-color;

    }

    &--link {
        min-width: 219.3px;
        margin: 0 auto;
        display: block;
    }

}