$_banner-triangle-size: 1.49rem;


.c-banner {
	@include var(background-color, card-accent);
	background-image: url("#{$path-to-img}/resource-banner-inset-lightmode.svg");
	background-position: center right;
	background-repeat: no-repeat;
	@include var(color, card-accent-text);
	font-family: $font-family-secondary;
	letter-spacing: $font-tracking-slight;
	line-height: $line-height-single;
	margin-top: 1.5rem;
	padding: 0.1rem 1rem 0.6rem 0.3rem;

	// [1] Magic number to position the triangle
	&::before {
		content: "";
		border-style: solid;
		border-color: transparent;
		@include var(border-right-color, card-accent-shadow);
		border-width: 0 $_banner-triangle-size $_banner-triangle-size 0;
		display: inline-block;
		position: relative;
		top: 2.26rem; // [1]
		right: 0.275rem; // [1]
		z-index: -1;

			// User Queries
		@media screen and (-ms-high-contrast: active) {
			display: none;
		}
	}

  @media (prefers-color-scheme: dark) {
    :root:not([data-user-theme="light"]) & {
			background-image: url("#{$path-to-img}/resource-banner-inset-darkmode.svg");
    }
  }

  [data-user-theme="dark"] &  {
		background-image: url("#{$path-to-img}/resource-banner-inset-darkmode.svg");
  }

	// Contexts
	&.c-banner--resource {
		@include var(background-color, featured-card-accent);
		background-image: none;
		@include var(color, featured-card-accent-text);
		margin-top: 0;

		&::before {
			@include var(border-right-color, featured-card-accent-shadow);
		}
	}

	&.c-banner--post {
		background-image: none;
		margin-top: 0;
	}
}


.c-banner__icon {
	fill: currentColor;
	height: 0.75rem;
	width: auto;

	// User Queries
	@media screen and (-ms-high-contrast: active) {
		display: none;
	}
}
