@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/components/_callouts.scss

@@ -0,0 +1,427 @@
+@use "../lib/utils";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-callout {
+	background-color: variables.$white;
+	border-radius: 6px;
+	box-shadow: inset 0 0 0 1px variables.$grey-dark;
+	display: flex;
+	margin-bottom: variables.$unit2;
+	opacity: 1;
+	overflow: hidden;
+	padding: 20px;
+	padding-left: 21px;
+	position: relative;
+	text-align: left;
+	transition: all 0.3s ease-out;
+
+	&:before {
+		bottom: 0;
+		content: '';
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 5px;
+	}
+
+	i {
+		background-size: 23px 23px !important;
+		flex: 0 0 23px;
+		height: 23px;
+		margin-right: 12px;
+		width: 23px;
+	}
+
+	&__icon {
+		flex: 0 0 23px;
+		height: 23px;
+		margin-right: 12px;
+		width: 23px;
+
+		svg {
+			height: 23px;
+			width: 23px;
+		}
+	}
+
+	h4 {
+		font-size: 1.6rem;
+		font-weight: 600;
+		letter-spacing: -0.5px;
+		line-height: 2.2rem;
+		margin-bottom: 2px;
+	}
+
+	p {
+		color: variables.$black;
+		line-height: 1.5;
+		margin-bottom: 0;
+
+		& + p,
+		& + ul {
+			margin-top: variables.$unit1;
+		}
+	}
+
+	&__content {
+		align-self: center;
+		flex: 2;
+		margin-left: variables.$unit0;
+		word-break: break-word;
+	}
+
+	&__dismiss {
+		@extend .reset-button !optional;
+		background-position: center;
+		background-size: contain;
+		cursor: pointer;
+		flex: 0 0 22px;
+		height: 22px;
+		margin-left: 12px;
+		margin-right: -2px;
+		margin-top: -2px;
+		transition: opacity 0.2s;
+		width: 22px;
+
+		&:hover {
+			opacity: 0.6;
+		}
+	}
+
+	.Vlt-btn {
+		margin-top: variables.$unit2;
+	}
+
+	// to deprecate
+	&__cta {
+		@extend %Vlt-btn !optional;
+		@extend %Vlt-btn--small !optional;
+		@extend %Vlt-btn--secondary !optional;
+		@extend %Vlt-btn--app !optional;
+		line-height: 1.6rem; // needed for Safari
+		margin-bottom: 0px;
+		margin-top: 10px;
+		min-height: 30px;
+	}
+
+	&--dismissed {
+		border: 0 !important;
+		height: 0;
+		opacity: 0;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	&--bottom {
+		margin-bottom: 0;
+		margin-top: variables.$unit2;
+	}
+
+	&--warning {
+		&:before {
+			background-color: variables.$yellow;
+		}
+
+		& .Vlt-callout__icon {
+			svg {
+				fill: variables.$yellow;
+			}
+		}
+
+		i {
+			$fill-color: utils.encode-hex-code(variables.$yellow);
+			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M23.8055%2020.7941L13.443%201.36628C12.8278%200.211242%2011.1722%200.211242%2010.5554%201.36628L0.194435%2020.7941C-0.386353%2021.8837%200.403847%2023.2007%201.63905%2023.2007H22.3626C23.5961%2023.2007%2024.3863%2021.8837%2023.8055%2020.7941ZM12%2019.9286C11.0969%2019.9286%2010.364%2019.1957%2010.364%2018.2926C10.364%2017.3895%2011.0969%2016.6566%2012%2016.6566C12.9031%2016.6566%2013.636%2017.3895%2013.636%2018.2926C13.636%2019.1957%2012.9031%2019.9286%2012%2019.9286ZM13.636%2015.0205H10.364V8.47644H13.636V15.0205Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+
+		.Vlt-callout__dismiss {
+			$fill-color: utils.encode-hex-code(variables.$black);
+			background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+
+	&--critical {
+		&:before {
+			background-color: variables.$red;
+		}
+
+		& .Vlt-callout__icon {
+			svg {
+				fill: variables.$red;
+			}
+		}
+
+		i {
+			$fill-color: utils.encode-hex-code(variables.$red);
+			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM9%2012H7V7H9V12ZM8%206C7.4%206%207%205.6%207%205C7%204.4%207.4%204%208%204C8.6%204%209%204.4%209%205C9%205.6%208.6%206%208%206Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			transform: rotate(180deg);
+		}
+
+		.Vlt-callout__dismiss {
+			$fill-color: utils.encode-hex-code(variables.$black);
+			background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+
+	&--good {
+		&:before {
+			background-color: variables.$green;
+		}
+
+		& .Vlt-callout__icon {
+			svg {
+				fill: variables.$green;
+			}
+		}
+
+		i {
+			$fill-color: utils.encode-hex-code(variables.$green);
+			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM7%2011.4L3.6%208L5%206.6L7%208.6L11%204.6L12.4%206L7%2011.4Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+
+		.Vlt-callout__dismiss {
+			$fill-color: utils.encode-hex-code(variables.$black);
+			background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+
+	&--shoutout {
+		&:before {
+			background-color: variables.$indigo;
+		}
+
+		& .Vlt-callout__icon {
+			svg {
+				fill: variables.$indigo;
+			}
+		}
+
+		i {
+			$fill-color: utils.encode-hex-code(variables.$indigo);
+			background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M17.9%2C0.2C18.3%2C0.1%2C18.6%2C0%2C19%2C0c2.9%2C0%2C5%2C3.9%2C5%2C9s-2.1%2C9-5%2C9c-0.4%2C0-0.7-0.1-1-0.2L2.7%2C13%0A%09%09c-0.8-0.3-1.6-0.8-2-1.5C0.2%2C10.7-0.1%2C9.9%2C0%2C9c-0.1-0.9%2C0.2-1.7%2C0.7-2.5C1.2%2C5.8%2C1.9%2C5.3%2C2.7%2C5L17.9%2C0.2z%20M16%2C9c0%2C4%2C1.6%2C7%2C3%2C7%0A%09%09c1.4%2C0%2C3-3%2C3-7s-1.6-7-3-7C17.6%2C2%2C16%2C5%2C16%2C9z%20M20%2C9c0-0.7-0.3-1.4-0.8-2c-0.5-0.5-1.2-0.9-1.9-1C17.1%2C7%2C17%2C8%2C17%2C9c0%2C1%2C0.1%2C2%2C0.3%2C3%0A%09%09c0.7-0.1%2C1.4-0.4%2C1.9-1C19.7%2C10.4%2C20%2C9.7%2C20%2C9z%20M11.7%2C17.9l-5.8-1.8l2.6%2C6.5c0.1%2C0.3%2C0.3%2C0.5%2C0.5%2C0.8c0.2%2C0.2%2C0.5%2C0.4%2C0.8%2C0.5%0A%09%09c0.3%2C0.1%2C0.6%2C0.2%2C0.9%2C0.2c0.3%2C0%2C0.6-0.1%2C0.9-0.2s0.5-0.3%2C0.8-0.5c0.2-0.2%2C0.4-0.5%2C0.5-0.8c0.1-0.3%2C0.2-0.6%2C0.2-0.9%0A%09%09c0-0.3-0.1-0.6-0.2-0.9L11.7%2C17.9z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+
+		.Vlt-callout__dismiss {
+			$fill-color: utils.encode-hex-code(variables.$black);
+			background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+
+	&--tip {
+		&:before {
+			background-color: variables.$purple-dark;
+		}
+
+		& .Vlt-callout__icon {
+			svg {
+				fill: variables.$purple-dark;
+			}
+		}
+
+		i {
+			$fill-color: utils.encode-hex-code(variables.$purple-dark);
+			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM9%2012H7V7H9V12ZM8%206C7.4%206%207%205.6%207%205C7%204.4%207.4%204%208%204C8.6%204%209%204.4%209%205C9%205.6%208.6%206%208%206Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+
+		.Vlt-callout__dismiss {
+			$fill-color: utils.encode-hex-code(variables.$black);
+			background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+
+	&--banner {
+		align-items: start;
+		border-radius: 0;
+		box-shadow: none;
+		justify-content: center;
+		margin: 0 !important;
+		padding: variables.$unit2;
+		padding-right: 54px;
+		text-align: center;
+
+		i {
+			background-size: 20px 20px !important;
+			flex: 0 0 20px;
+			height: 20px;
+			margin-top: 5px;
+			width: 20px;
+		}
+
+		.Vlt-callout__icon {
+			flex: 0 0 20px;
+			height: 20px;
+			margin-top: 5px;
+			width: 20px;
+
+			svg {
+				height: 20px;
+				width: 20px;
+			}
+		}
+
+		p,
+		.Vlt-callout__link {
+			font-size: 1.4rem;
+			font-weight: 600;
+			line-height: 2.2rem;
+		}
+
+		&:before {
+			display: none;
+		}
+
+		&.Vlt-callout--critical {
+			background-color: variables.$red;
+
+			p,
+			.Vlt-callout__link {
+				color: variables.$white;
+			}
+
+			i {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM9%2012H7V7H9V12ZM8%206C7.4%206%207%205.6%207%205C7%204.4%207.4%204%208%204C8.6%204%209%204.4%209%205C9%205.6%208.6%206%208%206Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				transform: rotate(180deg);
+			}
+
+			.Vlt-callout__dismiss {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			}
+		}
+
+		&.Vlt-callout--good {
+			background-color: variables.$green-light;
+
+			i {
+				$fill-color: utils.encode-hex-code(variables.$black);
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM7%2011.4L3.6%208L5%206.6L7%208.6L11%204.6L12.4%206L7%2011.4Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			}
+		}
+
+		&.Vlt-callout--shoutout {
+			background-color: variables.$indigo;
+
+			p,
+			.Vlt-callout__link {
+				color: variables.$white;
+			}
+
+			i {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M17.9%2C0.2C18.3%2C0.1%2C18.6%2C0%2C19%2C0c2.9%2C0%2C5%2C3.9%2C5%2C9s-2.1%2C9-5%2C9c-0.4%2C0-0.7-0.1-1-0.2L2.7%2C13%0A%09%09c-0.8-0.3-1.6-0.8-2-1.5C0.2%2C10.7-0.1%2C9.9%2C0%2C9c-0.1-0.9%2C0.2-1.7%2C0.7-2.5C1.2%2C5.8%2C1.9%2C5.3%2C2.7%2C5L17.9%2C0.2z%20M16%2C9c0%2C4%2C1.6%2C7%2C3%2C7%0A%09%09c1.4%2C0%2C3-3%2C3-7s-1.6-7-3-7C17.6%2C2%2C16%2C5%2C16%2C9z%20M20%2C9c0-0.7-0.3-1.4-0.8-2c-0.5-0.5-1.2-0.9-1.9-1C17.1%2C7%2C17%2C8%2C17%2C9c0%2C1%2C0.1%2C2%2C0.3%2C3%0A%09%09c0.7-0.1%2C1.4-0.4%2C1.9-1C19.7%2C10.4%2C20%2C9.7%2C20%2C9z%20M11.7%2C17.9l-5.8-1.8l2.6%2C6.5c0.1%2C0.3%2C0.3%2C0.5%2C0.5%2C0.8c0.2%2C0.2%2C0.5%2C0.4%2C0.8%2C0.5%0A%09%09c0.3%2C0.1%2C0.6%2C0.2%2C0.9%2C0.2c0.3%2C0%2C0.6-0.1%2C0.9-0.2s0.5-0.3%2C0.8-0.5c0.2-0.2%2C0.4-0.5%2C0.5-0.8c0.1-0.3%2C0.2-0.6%2C0.2-0.9%0A%09%09c0-0.3-0.1-0.6-0.2-0.9L11.7%2C17.9z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A');
+			}
+
+			.Vlt-callout__dismiss {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			}
+		}
+
+		&.Vlt-callout--tip {
+			background-color: variables.$purple-dark;
+
+			p,
+			.Vlt-callout__link {
+				color: variables.$white;
+			}
+
+			i {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM9%2012H7V7H9V12ZM8%206C7.4%206%207%205.6%207%205C7%204.4%207.4%204%208%204C8.6%204%209%204.4%209%205C9%205.6%208.6%206%208%206Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			}
+
+			.Vlt-callout__dismiss {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%0D%0A%09%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M12%2012.7223L18.2777%2019L19%2018.2777L12.7223%2012L19%205.72229L18.2777%205L12%2011.2777L5.72229%205L5%205.72229L11.2777%2012L5%2018.2777L5.72229%2019L12%2012.7223Z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			}
+		}
+
+		&.Vlt-callout--warning {
+			background-color: variables.$yellow;
+
+			i {
+				$fill-color: utils.encode-hex-code(variables.$black);
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M23.8055%2020.7941L13.443%201.36628C12.8278%200.211242%2011.1722%200.211242%2010.5554%201.36628L0.194435%2020.7941C-0.386353%2021.8837%200.403847%2023.2007%201.63905%2023.2007H22.3626C23.5961%2023.2007%2024.3863%2021.8837%2023.8055%2020.7941ZM12%2019.9286C11.0969%2019.9286%2010.364%2019.1957%2010.364%2018.2926C10.364%2017.3895%2011.0969%2016.6566%2012%2016.6566C12.9031%2016.6566%2013.636%2017.3895%2013.636%2018.2926C13.636%2019.1957%2012.9031%2019.9286%2012%2019.9286ZM13.636%2015.0205H10.364V8.47644H13.636V15.0205Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			}
+		}
+
+		&.Vlt-callout--good,
+		&.Vlt-callout--warning {
+			.Vlt-callout__icon {
+				svg {
+					fill: variables.$black;
+				}
+			}
+		}
+
+		&.Vlt-callout--critical,
+		&.Vlt-callout--shoutout,
+		&.Vlt-callout--tip {
+			.Vlt-callout__icon {
+				svg {
+					fill: variables.$white;
+				}
+			}
+		}
+
+		.Vlt-callout__content {
+			flex: inherit;
+			margin: 4px 0px
+		}
+
+		.Vlt-btn,
+		.Vlt-callout__cta {
+			@extend %Vlt-btn--small !optional;
+			flex: none;
+			margin: 0 0 0 16px;
+		}
+
+		.Vlt-callout__link {
+			@extend %Vlt-text-btn !optional;
+			color: variables.$black;
+			margin-left: 4px;
+			margin-top: 4px;
+			text-decoration: underline;
+		}
+
+		.Vlt-callout__dismiss {
+			position: absolute;
+			right: 22px;
+			top: 22px;
+		}
+	}
+}