scapegoat/Docs2.git

			@@ -1,3 +1,4 @@
			@use "./variables.scss" as *;
			@use "sass:color";

			.callout {
			@@ -6,11 +7,19 @@
			border-radius: 5px;
			padding: 0 1rem;
			overflow-y: hidden;
			transition: max-height 0.3s ease;
			box-sizing: border-box;

			& > *:nth-child(2) {
			margin-top: 0;
			& > .callout-content {
			display: grid;
			transition: grid-template-rows 0.3s ease;

			& > .callout-content-inner {
			overflow: hidden;

			& > :first-child {
			margin-top: 0;
			}
			}
			}

			--callout-icon-note: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg>');
			@@ -119,7 +128,7 @@

			.callout-title {
			display: flex;
			align-items: center;
			align-items: flex-start;
			gap: 5px;
			padding: 1rem 0;
			color: var(--color);
			@@ -130,8 +139,6 @@
			transition: transform 0.15s ease;
			opacity: 0.8;
			cursor: pointer;
			width: var(--icon-size);
			height: var(--icon-size);
			--callout-icon: var(--callout-icon-fold);
			}

			@@ -144,6 +151,7 @@
			& .fold-callout-icon {
			width: var(--icon-size);
			height: var(--icon-size);
			flex: 0 0 var(--icon-size);

			// icon support
			background-size: var(--icon-size) var(--icon-size);
			@@ -153,9 +161,10 @@
			mask-size: var(--icon-size) var(--icon-size);
			mask-position: center;
			mask-repeat: no-repeat;
			padding: 0.2rem 0;
			}

			.callout-title-inner {
			font-weight: 700;
			font-weight: $semiBoldWeight;
			}
			}