// =============================================================================
// :: Tip
// =============================================================================
.c-tip {
	display: flex;
	align-items: center;
	padding: 1.2rem 2rem;

	color: $text-color-light;
	background-color: $background-color-pink-dark;
	border-radius: $border-radius-2x-small;

	span,
	p,
	a {
		color: $text-color-light;
	}

	a {
		text-decoration: underline;
	}

	@include respond-at(get-breakpoint("tablet")) {
		padding: 2rem 3rem;
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-tip__icon {
	margin-right: 2.5rem;

	font-size: $font-size-3x-large;
}

.c-tip__text {
	font-style: italic;
}

// =============================================================================
// :: Modifiers
// =============================================================================

.c-tip--background-color-green {
	color: $text-color-base;
	background-color: $background-color-green;

	span,
	p,
	a {
		color: $text-color-base;
	}
}