@import "../card.less";

.cards {
	--cards-light-gray: var(--brand-bg-gray);
	--cards-dark-gray: var(--brand-secondary);

	&.cards-primary {
		.cards-icon {
			color: @white;
		}
	}

	&.cards-secondary {
		&:after {
			border-bottom: 4px solid @payex-light-blue;
		}

		> i {
			color: @payex-light-blue;
		}

		.cards-icon {
			color: @white;
			background-color: @payex-light-blue;
		}
	}

	&.cards-tertiary {
		&:after {
			border-bottom: 4px solid @payex-dark-blue;
		}

		> i {
			color: @payex-dark-blue;
		}

		.cards-icon {
			color: @white;
			background-color: @payex-dark-blue;
		}
	}
}