/* -------------------------------
  Frontmatter Overrides
------------------------------- */
.workspace-leaf-content[data-sb] .view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller,
.workspace-leaf-content[data-sb] .view-content .markdown-preview-view {
	padding-top: var(--sb-height, 240px);

	.inline-embed .el-pre.mod-frontmatter.mod-ui,
	.inline-embed .markdown-preview-view {
		padding-top: initial;
	}

	.cm-sizer {
		position: relative;
		z-index: 1;
		margin-top: (var(--sb-note-offset, 0));
	}
}

.workspace-leaf-content[data-sb][data-mode="source"] .view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller {
	.cm-sizer {
		margin-top: 0;
	}
}

.workspace-leaf-content[data-sb] .view-content {
	margin-top: var(--sb-view-offset, 0);
}

body.sb-autohide {
	.workspace-leaf-content[data-sb] .view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller,
	.workspace-leaf-content[data-sb] .view-content .markdown-preview-view {
		padding-top: 0;

		.iconic-title-wrapper {
			display: initial;
			font-size: var(--inline-title-size);

			& > div.iconic-icon {
				display: none;
			}
		}

		.metadata-container {
			position: absolute;
			container-type: normal;
			left: 50%;
			transform: translateX(-50%);
			font-size: initial;
			padding: var(--size-4-2) var(--size-4-6) var(--size-4-6) var(--size-4-6);
			z-index: 2;
			width: 100%;


			.metadata-properties-heading {
				width: 100%;
				transform: translateY(-3px);
				transition: opacity 0.2s linear, transform 0.2s ease-in-out;
				cursor: pointer;
			}

			&:before {
				content: '';
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				left: 0;
				background-color: color-mix(in srgb, var(--background-primary) 90%, transparent);
				backdrop-filter: blur(5px);
				opacity: 1;
				z-index: -1;
				border-radius: 0 0 var(--radius-m) var(--radius-m);
				box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
				transform: translateY(0);
				transition: opacity 0.2s linear, transform 0.2s ease-in-out;
			}

			&:after {
				content: '';
				position: absolute;
				inset: 0;
				height: 2px;
				width: 100%;
				opacity: 0.1;
				background-color: black;
				box-shadow: 0 2px 2px black;
				transition: box-shadow 0.2s linear, opacity 0.2s linear;
			}

			&.is-collapsed {
				.metadata-properties-heading {
					opacity: 0.5;
					transform: translateY(-70px);
					& > .metadata-properties-title {
						opacity: 0;
						transition: opacity 0.2s linear;
					}
				}
				&:before {
					opacity: 0;
					transform: translateY(-70px);
				}
				&:after {
					opacity: 0;
					box-shadow: 0 2px 2px black;
				}
			}

			&:hover, &:focus, &:focus-within {
				&.is-collapsed {
					&:before {
						transform: translateY(-26px);
						opacity: 0.85;
					}
					&:after {
						opacity: 0.1;
					}
				}

				.metadata-properties-heading.is-collapsed {
					opacity: 1;
					transform: translateY(-3px);
					&:before {
						opacity: 0;
					}
					& > .metadata-properties-title {
						opacity: 1;
					}
				}
			}
		}

		.cm-sizer {
			margin-top: inherit;
		}

		.cm-contentContainer {
			position: relative;
			z-index: 1;
			padding-top: calc(var(--sb-height, 240px) + (var(--sb-note-offset) - 6px));
		}

		.el-pre.mod-frontmatter.mod-ui {
			padding-top: calc(var(--sb-height, 240px) + (var(--sb-note-offset) + 12px));
		}

		.inline-embed .el-pre.mod-frontmatter.mod-ui {
			padding-top: initial;
		}
	}

	&.show-inline-title .workspace-leaf-content[data-sb] .view-content .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller,
	&.show-inline-title .workspace-leaf-content[data-sb] .view-content .markdown-preview-view {
		.cm-contentContainer {
			padding-top: 0;
		}
		.inline-title {
			padding-top: calc(var(--sb-height, 240px) + (var(--sb-note-offset) + 12px));
		}
		.el-pre.mod-frontmatter.mod-ui {
			padding-top: 0;
		}
	}

	&.is-mobile {
		.workspace-leaf-content[data-sb] .view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller,
		.workspace-leaf-content[data-sb] .view-content .markdown-preview-view {
			.metadata-container {
				left: calc(50% + (var(--size-4-1) * 1));
			}
		}
	}
}
