@use "sass:color";
@use "../../../scss/calypso-colors";

.dops-plan-icon {
	width: inherit;
	height: inherit;
	background-repeat: no-repeat;
}

.dops-plan-icon__free {

	.dops-plan-icon__free-0 {
		fill: calypso-colors.$blue-light;
	}

	.dops-plan-icon__free-1 {
		fill: calypso-colors.$white;
	}

	.dops-plan-icon__free-2 {
		fill: color.adjust(calypso-colors.$blue-wordpress, $lightness: -8%);
	}

	.dops-plan-icon__free-3 {
		fill: calypso-colors.$blue-wordpress;
	}

	.dops-plan-icon__free-4 {
		fill: color.adjust(calypso-colors.$blue-wordpress, $lightness: 8%);
	}
}

.dops-plan-icon__personal {

	.dops-plan-icon__personal-0 {
		fill: calypso-colors.$alert-yellow;
	}

	.dops-plan-icon__personal-1 {
		fill: calypso-colors.$gray;
	}

	.dops-plan-icon__personal-2 {
		fill: color.adjust(calypso-colors.$gray, $lightness: 20%);
	}

	.dops-plan-icon__personal-3 {
		fill: calypso-colors.$white;
	}

	.dops-plan-icon__personal-4 {
		fill: color.adjust(calypso-colors.$gray, $lightness: -10%);
	}

	.dops-plan-icon__personal-5 {
		fill: color.adjust(calypso-colors.$gray, $lightness: -20%);
	}
}

.dops-plan-icon__premium {

	.dops-plan-icon__premium-0 {
		fill: calypso-colors.$alert-green;
	}

	.dops-plan-icon__premium-1 {
		fill: calypso-colors.$gray;
	}

	.dops-plan-icon__premium-2 {
		fill: color.adjust(calypso-colors.$gray, $lightness: -20%);
	}

	.dops-plan-icon__premium-3 {
		fill: calypso-colors.$white;
	}

	.dops-plan-icon__premium-4 {
		fill: color.adjust(calypso-colors.$gray, $lightness: 20%);
	}

	.dops-plan-icon__premium-5 {
		fill: color.adjust(calypso-colors.$gray, $lightness: -20%);
	}

	.dops-plan-icon__premium-6 {
		fill: color.adjust(calypso-colors.$gray, $lightness: -30%);
	}
}

.dops-plan-icon__business {

	.dops-plan-icon__business-0 {
		fill: calypso-colors.$alert-purple;
	}

	.dops-plan-icon__business-1 {
		fill: calypso-colors.$white;
	}

	.dops-plan-icon__business-2 {
		fill: color.adjust(calypso-colors.$gray, $lightness: 30%);
	}

	.dops-plan-icon__business-3 {
		fill: calypso-colors.$blue-wordpress;
	}

	.dops-plan-icon__business-4 {
		fill: calypso-colors.$blue-dark;
	}
}
