/* adapted from https://lea.verou.me/blog/2024/css-conditionals-now/#binary-linear-interpolation */



:is(.warning, .info, .note, .tip, .example, .question, .def)::before {
	--offset: .5em;

	padding: .3em 1em;
	width: max-content;
	max-width: 100%;
	column-span: all;
	align-self: start;
	clip-path: polygon(var(--offset) 0, 100% 0, calc(100% - var(--offset)) 100%, 0 100%);
	margin: 0;
	margin-left: calc(-1 * var(--offset));
	margin-bottom: .4rem;
	background: var(--label-color, var(--color-accent));
	font: 800 .8em/1.2 Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	/* text-transform: uppercase; */
	color: white;
	content: var(--label);

	> a {
		color: inherit;
	}
}

:is(.warning, .info, .note, .tip, .example, .question, .def)[title]::before {
	content: attr(title);
}

.warning,
.info,
.question,
.note,
.tip,
.example,
.def {

	position: relative;
	background: var(--color-light);
	padding: 1.2em 1em .8em;
	border-radius: .3em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	container: callout / inline-size;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1em;
	font-weight: 500;

	--code-background: color-mix(in lab, var(--color) 10%, lab(none none none / 0%));

	> :is(p, ul, ol, dl):where(:only-child, h4 + :last-child) {
		margin-block: 0;
	}
	

	
	& b, & strong {
	  color: var(--label-color, var(--color-accent))!important;
	}
	
	& i, & em {
	  color: var(--label-color, var(--color-accent))!important;
	}

	&::before {
		display: block;
	}

	&::before {
		margin-top: -2em;
		margin-bottom: .8em;
	}

	code:not(pre > *) {
		font-size: 100%;
		background: none;
		color: var(--label-color, var(--color-accent))!important;
	}

	pre[class*="language-"][class*="language-"] {
		padding: .5em .8em;
		background: var(--code-background);
	}

	&.plain,
	&.no-icon {
		--icon: initial;
	}

	&.plain {
		--label: initial;
		padding: .8rem 1.2rem .8rem;
	}
	
	&.no-header {
	  --label: initial;
	}

	@supports (color: color-mix(in lab, white, black)) {
		--color-lighter: color-mix(in lab, var(--color), white 88%);
		--color-darker: color-mix(in lab, var(--color), black 20%);
	}

	@media (width > 600px) {
		&:where(:not(.plain, .no-icon)) {
			padding-left: 2.5em;
		}

		&::after {
			content: var(--icon);
			position: absolute;
			left: .5em;
			top: 50%;
			transform: translateY(-50%);
			font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
			font-size: 1em;
			width: 1.5em;
			height: 1.5em;
			display: inline-block;
			background: white;
			border-radius: 50%;
			vertical-align: middle;
			color: var(--color, var(--color-orange));
			text-align: center;
		}
	}

	a {
		color: var(--link-color, var(--color, var(--color-accent)))!important;
		mix-blend-mode: multiply;
		font-weight: 600;
	}
	
}

.def {
	--label: "DEFINITION";
	--icon: "\f02d";
	--color: #118AB2;
	--color-light: var(--color-lighter);
	--label-color: var(--color);
	--link-color: var(--color-darker);
}

.warning {
	--label: "WARNING";
	--icon: "\f071";
	--color: #E2852E;
	--color-light: var(--color-lighter);
	--label-color: var(--color);
	--link-color: var(--color-darker);
}


.question {
  --label: "QUESTION";
	--icon: "\3f";
	--color: #F5AD18;
	--color-light: var(--color-lighter);
	--label-color: var(--color);
	--link-color: var(--color-darker);
}

.note {
	--label: "NOTE";
	--icon: "\f46c";
	--color: #5459AC;
	--color-light: var(--color-lighter);
	--label-color: var(--color);
	--link-color: var(--color-darker);
}

.info {
  --label: "FYI";
	--icon: "\f129";
	--color: #118AB2;
	--color-light: var(--color-lighter);
	--label-color: var(--color);
	--link-color: var(--color-darker);
}


.example {
	--label: "EXAMPLE";
	--icon: initial;
	padding-inline: 2em;

	&.bad,
	&.good {
		--color-light: var(--color-lighter);
		--link-color: var(--color-darker);
		--label-color: var(--color);
	}

	&.bad {
		--color: #bc4749;
	}

	&.good {
		--color: #386641;
	}
}

:is(.warning, .info, .note, .tip, .example, .question) pre.sourceCode {
  border-left: 3px solid var(--color);
}

:is(.warning, .info, .note, .tip, .example, .question) .cell-output code {
  background-color: var(--color-light)!important;
}


.blockquote2 {
    --color: oklch(0.64 0.26 10);
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    unicode-bidi: isolate;
    margin-inline-start: 0px;
    padding-inline-start: 1.2em;
    font-style: italic;
    border-inline-start: .15em solid var(--color);
    padding-block: 0.8em 0.5em;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect width="100%" height="100%" fill="yellow" fill-opacity="0" /><text y="1em" font-size="5em" fill="hsl(336 100% 50%)" fill-opacity=".25">❞</text></svg>');
    background-position-x: right;
    background-position-y: bottom;
    background-size: auto min(8em, 80%);
    background-repeat: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: 
    color-mix(in lab, rgba(255, 255, 255, 0) 95.5%, oklch(0.64 0.26 10));
    & a {
      color: var(--color)!important;
    }
}


.box {
  background-color: #F0EDCC;
  color: #02343F;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 7px;
}
.box > p:first-of-type {
  margin: 0!important;
  display: block;
  margin-bottom: 20px!important;
}

.box > p:first-of-type > strong:first-child {
  background-color: #02343F;
  color: #F0EDCC;
  width: 100%;
  padding: 20px;
}