styles.css

body {
	--mb-border-width: var(--border-width);
	--mb-border-radius: var(--input-radius);
	--mb-slider-spacing: 5px;
	--mb-select-element-border-width: 5px;
	--mb-date-input-year-input-width: 80px;

	--mb-background-modifier-active: hsla(var(--interactive-accent-hsl), 0.15);
	--mb-background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.3);

	--mb-input-type-select-text: var(--text-muted);
	--mb-input-type-select-text-hover: var(--text-normal);
	--mb-input-type-select-text-active: var(--text-normal);
	--mb-input-type-select-text-active-hover: var(--text-normal);
}

/* Input Wrappers */
.mb-input {
	background-color: transparent !important;
	border: none !important;
}

.mb-input-wrapper {
	display: inline;
	white-space: normal;
}

.mb-input-inline {
	display: inline !important;
}

.mb-input-block {
	display: block !important;
}

/* View Wrappers */
/* For higher specificity */
:is(code, span).mb-view:has(> div.mb-view-wrapper) {
	background-color: transparent;
	border: none;
	color: inherit;
	font-size: inherit;
	font-family: inherit;
	padding: 0;
	margin: 0;
}

div.mb-view-wrapper.mb-view-markdown > p {
	margin: 0;
	display: inline-block;
}

div.mb-view-wrapper {
	display: inline;
}

.mb-button {
	background-color: transparent !important;
	border: none !important;
}

.mb-button-inline {
	display: inline !important;
}

.mb-button-block {
}

.mb-button-group {
	background-color: transparent !important;
	border: none !important;

	& > .mb-button {
		&:first-child:not(:last-child) {
			& > .mb-button-inner {
				border-radius: var(--mb-border-radius) 0 0 var(--mb-border-radius);
			}
		}

		&:last-child:not(:first-child) {
			& > .mb-button-inner {
				border-radius: 0 var(--mb-border-radius) var(--mb-border-radius) 0;
			}
		}

		&:last-child:first-child {
			& > .mb-button-inner {
				border-radius: var(--mb-border-radius);
			}
		}

		& > .mb-button-inner {
			border-radius: 0;
		}
	}
}

.mb-button-inner {
	vertical-align: bottom;
	/* Add a gap between text and icons. */
	gap: var(--size-4-1);
	background-size: cover;
	background-position: center center;

	&.mod-plain {
		background: none;
		box-shadow: none;
		border: none;

		color: var(--text-muted);
	}

	&.mod-plain:hover {
		color: var(--text-normal);
	}

	&.disabled {
		opacity: 0.6;
	}
}

/* Toggle Input */
.mb-input-wrapper .checkbox-container {
	vertical-align: text-bottom;
}

/* Slider Input */

.mb-input-wrapper:has(> .mb-slider-input) {
	display: inline-flex;
}

.mb-slider-input {
	align-self: center;
	margin-left: var(--mb-slider-spacing) !important;
	margin-right: var(--mb-slider-spacing) !important;
}

.mb-slider-input-label {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

/* Text Input */
.mb-content-limit-indicator {
	color: var(--text-muted);
	font-size: var(--font-ui-small);
}

.mb-content-limit-indicator-overflow {
	color: var(--color-red);
}

/* Select Input */
.mb-select-input-element {
	cursor: pointer;
	display: flex;
	gap: var(--size-4-2);
	align-items: center;
	padding: var(--size-4-1) var(--size-4-2);
	margin: var(--size-4-1) 0;
	border-radius: var(--mb-border-radius);
	white-space: pre-wrap;
	font-size: 16px;
	min-width: 200px;
	color: var(--mb-input-type-select-text);

	&.is-selected {
		color: var(--mb-input-type-select-text-active);
		background: var(--mb-background-modifier-active);

		&:hover {
			color: var(--mb-input-type-select-text-active-hover);
			background: var(--mb-background-modifier-active-hover);
		}
	}

	&:hover {
		color: var(--mb-input-type-select-text-hover);
		background: var(--background-modifier-hover);
	}

	&:not(.mb-mod-multi) > input[type='checkbox'] {
		border-radius: 50%;
	}

	& > input[type='checkbox'] {
		margin: 0;
	}
}

/* List Input */
.mb-list-input {
	display: flex;
	gap: var(--size-4-2);
}

.mb-list-input > input {
	flex-grow: 1;
}

.mb-list-input > textarea {
	flex-grow: 1;
	resize: vertical;
}

.mb-list-empty {
	color: var(--text-faint);
}

.mb-list-items {
	margin-bottom: var(--size-4-4);
	display: flex;
	flex-direction: column;
	gap: var(--size-4-1);
}

.mb-list-item {
	display: flex;
	padding: var(--size-4-1) var(--size-4-2);
	border-radius: var(--mb-border-radius);
	user-select: text;

	& > span {
		flex-grow: 1;
	}

	&:hover {
		background: var(--background-modifier-hover);
	}
}

/* Inline List */
.mb-inline-list {
	display: inline;
	font-size: 0;

	& > .mb-inline-list-item {
		border: var(--mb-border-width) solid var(--background-modifier-border);
		border-radius: var(--mb-border-radius);
		display: inline-flex;
		align-items: center;
		gap: var(--size-4-2);
		padding-inline: var(--size-4-2);
		padding-block: var(--size-4-1);
		font-size: var(--font-ui-small);
		vertical-align: bottom;
		user-select: text;

		&:not(:last-child) {
			margin-right: var(--size-4-2);
		}

		&:hover {
			border-color: var(--background-modifier-border-hover);
			background-color: var(--background-modifier-hover);
			transition:
				box-shadow 0.15s ease-in-out,
				border 0.15s ease-in-out;
		}
	}

	& > .mb-inline-list-add {
		border: var(--mb-border-width) solid var(--background-modifier-border);
		border-radius: var(--mb-border-radius);
		display: inline-flex;
		align-items: center;
		padding-inline: var(--size-4-2);
		padding-block: var(--size-4-1);
		font-size: var(--font-ui-small);

		&:hover {
			border-color: var(--background-modifier-border-hover);
			background-color: var(--background-modifier-hover);
			transition:
				box-shadow 0.15s ease-in-out,
				border 0.15s ease-in-out;
		}

		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
			color: var(--text-normal);
		}
	}
}

/* Suggester Input */
.mb-suggest-input {
	background: var(--background-modifier-form-field);
	border-radius: var(--mb-border-radius);
	border: var(--mb-border-width) solid var(--background-modifier-border);
	padding: var(--size-4-1) var(--size-4-2);
	position: relative;
	color: var(--text-normal);
	display: inline-flex;
	align-items: center;
	gap: var(--size-4-1);
	user-select: text;

	&:hover {
		border-color: var(--background-modifier-border-hover);
		transition:
			box-shadow 0.15s ease-in-out,
			border 0.15s ease-in-out;
	}
}

.mb-suggest-input > button {
	padding: 0;
	height: 20px;
}

.mb-suggest-text {
	display: inline-block;
}

/* Progress Bar Input */

.mb-progress-bar-input {
	height: var(--input-height);
	width: 100%;
	border-radius: var(--mb-border-radius);
	border: var(--mb-border-width) solid var(--background-modifier-border);
	position: relative;
	cursor: col-resize;
}

.mb-progress-bar-input:focus-visible {
	box-shadow: 0 0 0 3px var(--background-modifier-border-focus);
}

.mb-progress-bar-progress {
	height: 100%;
	background: var(--color-accent);
	border-radius: var(--mb-border-radius);
}

.mb-progress-bar-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mb-progress-bar-label-left {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	left: var(--size-4-2);
}

.mb-progress-bar-label-right {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: var(--size-4-2);
}

/* Text Area Input */

.mb-input-textarea {
	width: 100%;
	height: 100px;
	resize: vertical;
}

/* editor */

.mb-editor-input {
	background: var(--background-secondary);
	width: 100%;
	height: 500px;
	padding: 0;
	position: relative;
	margin-left: 0;
	overflow: scroll;
}

.mb-editor-input > textarea {
	background: var(--background-secondary);
	border: none;
	padding: var(--size-4-4) var(--size-4-8);
	margin: 0;
	position: absolute;
	inset: 0;
	resize: none;
	border-radius: 0;
}

.mb-editor-input > div {
	padding: var(--size-4-4) var(--size-4-8);
	position: absolute;
	inset: 0;
}

/* Card */
.mb-card {
	padding: var(--size-4-2);
	margin: var(--size-4-2) 0;
	border-radius: var(--mb-border-radius);
	border: var(--mb-border-width) solid var(--background-modifier-border);
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--size-4-2);
}

[class*='block-language-'] > .mb-card {
	display: flex;
}

.mb-card > :first-child {
	margin-top: 0;
}

.mb-card > :last-child {
	margin-bottom: 0;
}

.mb-card > code {
	display: block;
}

.mb-card > pre {
	margin: 0;
}

.mb-card > h3 {
	margin-top: 0;
}

.mb-card.mb-card-full-width {
	width: 100%;
}

/* Image */
.mb-image-search-container {
	margin-bottom: var(--size-4-4);
}

.mb-image-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--size-4-4);
}

.mb-image-card {
	position: relative;
}

.mb-image-suggester-modal {
	width: 80%;
}

.mb-image-card-image {
	width: 100%;
	height: fit-content;
	max-height: 500px;
	object-fit: contain;
}

.mb-image-card-text {
	display: block;
	margin: var(--size-4-2);
	margin-bottom: var(--size-4-4);
}

.mb-image-card-footer {
	display: flex;
	align-items: center;

	& > span {
		padding-left: var(--size-4-2);
		font-size: var(--font-ui-small);
		color: var(--text-muted);
		min-width: 0;
		text-overflow-ellipsis: true;
		flex: 1;
	}
}

.mb-image-card-button {
	position: absolute;
	opacity: 0;
	top: var(--size-4-2);
	right: var(--size-4-2);
	transition: opacity 0.2s ease-in-out;
}

.mb-image-card:hover .mb-image-card-button {
	opacity: 1;
}

.mb-image-suggest-input {
	background: var(--background-secondary);
	border-radius: var(--mb-border-radius);
	border: var(--mb-border-width) solid var(--background-modifier-border);
	padding: var(--size-4-2);
	width: 100%;
}

/* Time Input */

.mb-input-type-time {
	input[type='time'] {
		-webkit-app-region: no-drag;
		background: var(--background-modifier-form-field);
		border: var(--input-border-width) solid var(--background-modifier-border);
		color: var(--text-normal);
		font-family: inherit;
		padding: var(--size-4-1) var(--size-4-2);
		font-size: var(--font-ui-small);
		border-radius: var(--input-radius);
		outline: none;

		&:hover {
			border-color: var(--background-modifier-border-hover);
			transition:
				box-shadow 0.15s ease-in-out,
				border 0.15s ease-in-out;
		}

		&:focus,
		&:focus-visible {
			box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
		}
	}
}

/* Date Picker Input */

.mb-date-picker-input {
	background: var(--background-modifier-form-field);
	border: var(--mb-border-width) solid var(--background-modifier-border);
	color: var(--text-normal);
	font-family: inherit;
	padding: var(--size-4-1) var(--size-4-2);
	font-size: var(--font-ui-small);
	border-radius: var(--input-radius);
	outline: none;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;

	&:hover {
		border-color: var(--background-modifier-border-hover);
		transition:
			box-shadow 0.15s ease-in-out,
			border 0.15s ease-in-out;
	}

	&:focus,
	&:focus-visible {
		box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
	}

	& > .mb-date-picker-text {
		display: inline-block;
	}
}

.mb-date-picker {
	display: block;
	padding: var(--size-4-4);
}

.mb-date-picker-header {
	display: flex;
	gap: var(--size-4-2);
	align-items: center;
	justify-content: space-around;
}

.mb-date-picker-header-text {
	flex: 1;
	text-align: center;
	display: flex;
	gap: var(--size-4-2);
	align-items: center;
	justify-content: center;
	width: min-content;
}

.mb-date-picker-header-text-year {
	width: 60px;
	padding: var(--size-4-2);
}

.mb-date-picker-header-text-month {
	height: min-content;
}

.mb-date-picker-month-switch-button {
	margin: 0;
}

.mb-date-picker-util-button {
	margin: 0;
}

.mb-date-picker-footer {
	display: flex;
	gap: var(--size-4-2);
	align-items: center;
	justify-content: center;
}

.mb-calendar {
	margin-top: 10px;
}

.mb-calendar-header {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: var(--size-4-1);
	background: var(--background-secondary);
	border-radius: var(--mb-border-radius);
	margin-bottom: var(--size-4-1);
}

.mb-calendar-content {
	display: grid;
	flex-wrap: wrap;
	grid-template-columns: repeat(7, 1fr);
	gap: var(--size-4-1);
}

.mb-calendar-cell {
	min-width: 40px;
	padding: var(--size-4-2);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--mb-border-radius);
}

.mb-calendar-content-cell {
	cursor: pointer;
}

.mb-calendar-cell-text {
	margin: auto;
	text-align: center;
}

.mb-calendar-cell.mb-calendar-selected {
	background: var(--interactive-accent);
	color: var(--text-on-accent);
}

.mb-calendar-cell.mb-calendar-highlight:hover {
	background: var(--interactive-hover);
}

.mb-calendar-cell.mb-calendar-selected.mb-calendar-highlight:hover {
	background: var(--interactive-accent-hover);
}

/* Embed */

.mb-embed > .mb-embed-message {
	display: block;
	width: 100%;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-smaller);
}

/* Error */
.mb-error {
	color: var(--text-error) !important;
	font-weight: bold;
	font-family: var(--font-monospace);
}

code.mb-error {
	color: var(--text-error) !important;
}

.mb-warning {
	color: var(--text-warning) !important;
	font-weight: bold;
	font-family: var(--font-monospace);
}

code.mb-warning {
	color: var(--text-warning) !important;
}

/* Code */
.mb-code {
	color: var(--text-normal);
	font-family: var(--font-monospace);
}

/* Error Collection */
.mb-error-collection-card {
	padding: var(--size-4-2);
	margin: var(--size-4-2) 0;
	border-radius: var(--mb-border-radius);
	border: var(--mb-border-width) solid var(--background-modifier-border);
	color: var(--text-normal);
	font-family: var(--font-default);
}

.mb-error-collection {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-inline: var(--size-4-2);
}

.publish-renderer .mb-error-collection {
	margin-inline: 0;
}

.mb-error-collection > svg {
	width: var(--font-text-size);
	height: var(--font-text-size);
	vertical-align: text-bottom;
}

.mb-error-collection > svg.lucide-alert-circle {
	color: var(--text-error);
}

.mb-error-collection > svg.lucide-alert-triangle {
	color: var(--text-warning);
}

.mb-error-collection > svg.lucide-info {
	color: var(--text-normal);
}

.mb-pre {
	overflow-x: scroll;
}

.mb-pre > code {
	white-space: pre;
}

.mb-error-collection-modal {
	width: 80%;
}

.mb-error-text {
	color: var(--text-error) !important;
}

.mb-warning-text {
	color: var(--text-warning) !important;
}

/* --- Misc --- */

.mb-whitespace-pre {
	white-space: pre;
}

.mb-excluded-folders-table-input-cell {
	width: 100%;
}

.mb-excluded-folders-table-input-cell > input {
	width: 100%;
}

.mb-textarea {
	width: 100%;
	height: 100px;
	resize: vertical;
}

.mb-icon-wrapper {
	display: block;
	position: relative;
	width: 18px;
	height: 18px;
}

.mb-icon-wrapper.mb-icon-wrapper-inline {
	display: inline-block;
}

.mb-icon-wrapper > svg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.mb-faq-view {
	max-width: var(--file-line-width);
	margin-left: auto;
	margin-right: auto;
}

a.mb-no-link {
	color: var(--code-normal);
	text-decoration: none;
}

table.mb-html-table {
}

td.mb-html-table-button-cell {
	--table-column-min-width: 10px;
}

th.mb-html-table-button-cell {
	--table-column-min-width: 10px;
}

.mb-table-wrapper {
	overflow-x: auto;
}

.mb-flex-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-4-2);
}

.mb-flex-row.mb-flex-row-stretch > :first-child {
	flex: 1;
}

.mb-flex-row-reverse {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	gap: var(--size-4-2);
}

.mb-flex-row-reverse.mb-flex-row-stretch > :last-child {
	flex: 1;
}

.mb-full-width-text-input {
	width: 100%;
}

.mb-full-width-text-input > input {
	width: 100%;
}

.mb-full-width-text-input > textarea {
	width: 100%;
	height: 200px;
	resize: vertical;
}

div.setting-item.mb-vertical {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-4-1);
}

div.setting-item > div.setting-item-control.mb-vertical-control {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--size-4-1);
	width: 100%;
}

/* --- HIGHLIGHTING CLASSES --- */
.mb-highlight-test {
	color: #00bfbc;
}

.mb-highlight-ident,
.cm-mb-highlight-ident {
	color: var(--code-normal);
}

.mb-highlight-control,
.cm-mb-highlight-control {
	color: var(--code-keyword);
}

.mb-highlight-string,
.cm-mb-highlight-string {
	color: var(--code-string);
}

.mb-highlight-keyword,
.cm-mb-highlight-keyword {
	color: var(--code-property);
}

.mb-highlight-error,
.cm-mb-highlight-error {
	color: var(--text-error);
}

/* --- UTIL CLASSES --- */

.meta-bind-full-width > * {
	width: 100%;
}

.meta-bind-high > * {
	height: 200px;
}

.meta-bind-small-width > * {
	width: 80px;
}

/* --- PUBLISH STUFF --- */

.published-container {
	.mb-input-type-toggle > div {
		display: inline-block;
		vertical-align: sub;
	}
}