@use "sass:map";

@mixin cta {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	@include font-heading;
	align-items: center;
	background-color: transparent;
	border-radius: $cta_border_radius;
	border: none;
	color: $ui-foreground-primary-text-body-text !important;
	column-gap: 10px;
	display: inline-flex !important;
	font-size: px-to-rem($cta_font_size);
	letter-spacing: px-to-rem($cta_letter-spacing);
	line-height: $cta_line_height;
	text-transform: $cta_transform;
	transition: all 0.2s ease;
	text-decoration: none;

	&::selection {
		background-color: $selector_color;
		color: white;
	}
}

@mixin cta-primary-01($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;

	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-primary-02($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;

	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-primary-03($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;

	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-primary-04($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;

	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-inverse-primary($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;

	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-secondary($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;
	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-inverse-secondary($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: $cta_padding;
	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
}

@mixin cta-secondary-download($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	align-items: center;
	background-color: $bg-color;
	border: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: 21px 28px 21px 53px;
	&:hover {
		background-color: $hover-bg-color;
		border-color: $hover-border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		color: $focus-text-color !important;
		outline: none;
		box-shadow: 0 0 0 5px $focus-border-color;
	}
	&::before {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.77899 10.334L11.891 7.22205M8.77899 10.334V0.998047V10.334ZM8.77899 10.334L5.66699 7.22205L8.77899 10.334Z' stroke='%23243C49' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 11.8906L1.48314 13.824C1.56728 14.1606 1.76152 14.4594 2.035 14.673C2.30847 14.8865 2.64548 15.0026 2.99246 15.0026H14.5675C14.9145 15.0026 15.2515 14.8865 15.525 14.673C15.7985 14.4594 15.9927 14.1606 16.0769 13.824L16.56 11.8906' stroke='%23243C49' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		bottom: unset;
		display: block;
		height: 15px;
		left: 28px;
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
		width: 15px;
		z-index: 5;
	}
}

@mixin cta-tertiary($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: 23px;
	background-color: $bg-color;
	border-radius: 0;
	border-bottom: 2px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: 3px 16px 3px 0;
	flex-direction: row-reverse;
	align-items: center;

	&::before {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg width='9' height='11' viewBox='0 0 9 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.82107 1.96446C8.82107 1.55024 8.48528 1.21445 8.07107 1.21446L1.32107 1.21445C0.906854 1.21445 0.571068 1.55024 0.571068 1.96445C0.571068 2.37867 0.906854 2.71445 1.32107 2.71445H7.32107V8.71445C7.32107 9.12867 7.65685 9.46445 8.07107 9.46445C8.48528 9.46445 8.82107 9.12867 8.82107 8.71445L8.82107 1.96446ZM1.53033 9.56585L8.6014 2.49478L7.54074 1.43412L0.46967 8.50519L1.53033 9.56585Z' fill='%23210044'/%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		bottom: unset;
		display: block;
		height: 12px;
		width: 10px;
	}
	&:hover {
		background-color: $hover-bg-color;
		border-bottom-color: $border-color;
		color: $hover-text-color !important;
		text-decoration-line: underline;
		text-underline-offset: 2px;
		text-decoration-thickness: 1.5px;
		&::before {
			background-image: url("data:image/svg+xml,%3Csvg width='9' height='11' viewBox='0 0 9 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.82107 1.96446C8.82107 1.55024 8.48528 1.21445 8.07107 1.21446L1.32107 1.21445C0.906854 1.21445 0.571068 1.55024 0.571068 1.96445C0.571068 2.37867 0.906854 2.71445 1.32107 2.71445H7.32107V8.71445C7.32107 9.12867 7.65685 9.46445 8.07107 9.46445C8.48528 9.46445 8.82107 9.12867 8.82107 8.71445L8.82107 1.96446ZM1.53033 9.56585L8.6014 2.49478L7.54074 1.43412L0.46967 8.50519L1.53033 9.56585Z' fill='%23662D91'/%3E%3C/svg%3E%0A");
		}
	}
	&:focus {
		background-color: $focus-bg-color;
		border-bottom-color: $focus-border-color;
		box-shadow: none;
		color: $focus-text-color !important;
		outline: none;
		text-decoration-line: underline;
		text-underline-offset: 2px;
		text-decoration-thickness: 1.5px;
	}
}

@mixin cta-inverse-tertiary($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: 23px;
	background-color: $bg-color;
	border-bottom: 2px solid $border-color;
	border-radius: 0;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: 3px 16px 3px 0;
	flex-direction: row-reverse;
	align-items: center;

	&::before {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg width='9' height='11' viewBox='0 0 9 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.82107 1.96446C8.82107 1.55024 8.48528 1.21445 8.07107 1.21446L1.32107 1.21445C0.906854 1.21445 0.571068 1.55024 0.571068 1.96445C0.571068 2.37867 0.906854 2.71445 1.32107 2.71445H7.32107V8.71445C7.32107 9.12867 7.65685 9.46445 8.07107 9.46445C8.48528 9.46445 8.82107 9.12867 8.82107 8.71445L8.82107 1.96446ZM1.53033 9.56585L8.6014 2.49478L7.54074 1.43412L0.46967 8.50519L1.53033 9.56585Z' fill='%23FBF9F8'/%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		bottom: unset;
		display: block;
		height: 12px;
		width: 10px;
		z-index: 5;
	}
	&:hover {
		background-color: $hover-bg-color;
		border-bottom-color: $border-color;
		color: $hover-text-color !important;
		text-decoration-line: underline;
		text-underline-offset: 2px;
		text-decoration-thickness: 1.5px;
	}
	&:focus {
		background-color: $focus-bg-color;
		border-bottom-color: $focus-border-color;
		box-shadow: none;
		color: $focus-text-color !important;
		outline: none;
		text-decoration-line: underline;
		text-underline-offset: 2px;
		text-decoration-thickness: 1.5px;
	}
}

@mixin cta-fourth($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border-radius: $cta_border_radius;
	border-bottom: 1px solid $border-color;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: 21px 28px 21px 53px;
	position: relative;
	&::before {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3724 6.12294C13.7624 8.98294 9.90235 13.1929 7.26235 13.1929C4.62235 13.1929 0.762353 8.98294 0.152353 6.12294C-0.527647 3.00294 1.19235 1.26294 2.86235 0.722936C3.6305 0.457012 4.46088 0.428294 5.24556 0.640516C6.03025 0.852737 6.73296 1.29608 7.26235 1.91294C7.79212 1.29659 8.49484 0.853609 9.27939 0.641424C10.0639 0.429239 10.8941 0.457637 11.6624 0.722936C13.3324 1.26294 15.0524 3.00294 14.3724 6.12294Z' fill='%23FBF9F8'/%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		bottom: unset;
		display: block;
		height: 15px;
		left: 28px;
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
		transition: all 0.2s ease;
		width: 15px;
		z-index: 5;
	}
	&:hover {
		background-color: $hover-bg-color;
		border-bottom-color: $border-color;
		color: $hover-text-color;
	}
	&:focus {
		background-color: $focus-bg-color;
		border-bottom-color: $focus-border-color;
		box-shadow: 0 0 0 5px $focus-border-color;
		color: $focus-text-color;
		outline: none;
	}
}

@mixin cta-inverse-fourth($settings) {
	$bg-color: map.get($settings, "bg-color");
	$border-color: map.get($settings, "border-color");
	$text-color: map.get($settings, "text-color");
	$hover-bg-color: map.get($settings, "hover-bg-color");
	$hover-border-color: map.get($settings, "hover-border-color");
	$hover-text-color: map.get($settings, "hover-text-color");
	$focus-bg-color: map.get($settings, "focus-bg-color");
	$focus-border-color: map.get($settings, "focus-border-color");
	$focus-text-color: map.get($settings, "focus-text-color");

	// min-width: $cta_min_width;
	min-height: $cta_min_height;
	background-color: $bg-color;
	border-bottom: 1px solid $border-color;
	border-radius: $cta_border_radius;
	color: $text-color !important;
	font-weight: $cta_font_weight;
	justify-content: center;
	padding: 21px 28px 21px 53px;
	position: relative;

	&::before {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3724 6.12294C13.7624 8.98294 9.90235 13.1929 7.26235 13.1929C4.62235 13.1929 0.762353 8.98294 0.152353 6.12294C-0.527647 3.00294 1.19235 1.26294 2.86235 0.722936C3.6305 0.457012 4.46088 0.428294 5.24556 0.640516C6.03025 0.852737 6.73296 1.29608 7.26235 1.91294C7.79212 1.29659 8.49484 0.853609 9.27939 0.641424C10.0639 0.429239 10.8941 0.457637 11.6624 0.722936C13.3324 1.26294 15.0524 3.00294 14.3724 6.12294Z' fill='%23210044'/%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		bottom: unset;
		display: block;
		height: 15px;
		left: 28px;
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
		transition: all 0.2s ease;
		width: 15px;
		z-index: 5;
	}
	&:hover {
		background-color: $hover-bg-color;
		border-bottom-color: $border-color;
		color: $hover-text-color !important;
	}
	&:focus {
		background-color: $focus-bg-color;
		border-bottom-color: $focus-border-color;
		box-shadow: 0 0 0 5px $focus-border-color;
		color: $focus-text-color !important;
		outline: none;
	}
}