.c-button {
	@include button();
	background-color: $color-brand-green;

	&.--primary {
		background-color: $color-brand-blue;
	}

	&.--secondary {
		background-color: rgba($color-purple, 0.1);
		color: $color-purple;
	}

    &.--header-cta {
		background-color: rgba($color-brand-green, 0.3);
        color: $color-black;
	}

	&.--light {
		background-color: #ffffff;
		color: $color-brand-blue;
	}

	&.--primary-light {
		background-color: #fff;
		color: $color-brand-green;
	}

	&.--secondary-light {
		background-color: rgba(#fff, 0.1);
		color: #fff;
	}

	.icon {
		margin-right: 5px;
	}

	&:disabled {
		opacity: 0.6;
		pointer-events: none;
	}

	@include media-breakpoint-up(lg) {
		&:hover,
		&.--primary-light:hover {
			background-color: $color-black;
			border-color: $color-black;
			color: $color-brand-green;
		}

		&.--primary {
			&:hover {
				background-color: #fff;
				border-color: $color-brand-blue;
				color: $color-brand-blue;
			}
		}

        &.--secondary {
			&:hover {
				background-color: #fff;
				border-color: $color-purple;
				color: $color-purple;
			}
		}

		&.--light {
			&:hover {
				background-color: $color-brand-blue;
				border-color: transparent;
				color: #fff;
			}
		}

		&.--secondary-light {
			&:hover {
				border-color: transparent;
			}
		}
	}
}
