/* Tag */
.hrt-tag {
	font-size: 0.875rem;
	font-weight: bold;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	display: inline-block;
}

.hrt-tag--on-accent-blue {
	background-color: var(--blue-900);
	color: var(--blue-400);
}

.hrt-tag--on-accent-purple {
	background-color: var(--purple-900);
	color: var(--purple-400);
}

.hrt-tag--on-accent-yellow {
	background-color: var(--yellow-900);
	color: var(--yellow-400);
}

.hrt-tag--on-accent-pink {
	background-color: var(--pink-900);
	color: var(--pink-400);
}

.hrt-tag--on-brand-medium {
	background-color: var(--green-900);
	color: var(--green-300);
}

.hrt-tag--brand {
	background-color: var(--green-300);
	color: var(--green-900);
}

/*  Gutenberg
    Classes that can be added to Gutenberg blocks in WordPress editor
*/

.paragraph-with-links {
    a {
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.pro-report-container {
    max-width: 81rem;
    margin: 0 auto;
    @media (max-width: 1325px) {
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }
}

/* Callout */
.accent-callout-on-neutral {
	position: relative;
	display: inline-block;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--size-font-body-lg) !important;
	margin: 2rem 0;
	background-color: var(--neutral-100-50);
	@media (max-width: 768px) {
        display: block;
    }
}

.accent-callout-on-neutral::before {		
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--neutral-700);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.accent-callout-on-pink {
	position: relative;
	display: inline-block;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--size-font-body-lg) !important;
	margin: 2rem 0;
	background-color: var(--pink-300-50);
	@media (max-width: 768px) {
        display: block;
    }
}

.accent-callout-on-pink::before {		
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--pink-800);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.accent-callout-on-yellow {
	position: relative;
	display: inline-block;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--size-font-body-lg) !important;
	margin: 2rem 0;
	background-color: var(--yellow-300-50);
	@media (max-width: 768px) {
        display: block;
    }
}

.accent-callout-on-yellow::before {		
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--yellow-900);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.accent-callout-on-green {
	position: relative;
	display: inline-block;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--size-font-body-lg) !important;
	margin: 2rem 0;
	background-color: var(--green-100);
	@media (max-width: 768px) {
        display: block;
    }
}

.accent-callout-on-green::before {		
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--green-900);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.accent-callout-on-blue {
	position: relative;
	display: inline-block;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--size-font-body-lg) !important;
	margin: 2rem 0;
	background-color: var(--blue-300-50);
	@media (max-width: 768px) {
        display: block;
    }
}

.accent-callout-on-blue::before {		
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--blue-900);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.accent-callout-on-purple {
	position: relative;
	display: inline-block;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	padding: 1rem 1.5rem;
	font-size: var(--size-font-body-lg) !important;
	margin: 2rem 0;
	background-color: var(--purple-300-50);
	@media (max-width: 768px) {
        display: block;
    }
}

.accent-callout-on-purple::before {		
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--purple-900);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}