html.theme-dark {
	--white: #2d2d2d;
	--black-800: #e7e8eb;
	--theme-body-font-color: var(--black-800);
	background-color: var(--white);
	color: var(--theme-body-font-color);
	font-family: var(--theme-body-font-family);
}
html.theme-high-contrast {
	--white: #fff;
	--black-800: #000;
	--theme-body-font-color: var(--white);
	background-color: var(--black-800);
	color: var(--theme-body-font-color);
	font-family: var(--theme-body-font-family);
}
.editor {
	--ff-sans: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
	--theme-body-font-family: var(--ff-sans);
	--focus-ring-success: rgba(166, 217, 183, 0.4);
	--focus-ring-muted: rgba(23, 23, 23);
	--green-400: #5eba7d;
	--black-200: #bbc0c4;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5vh;
	padding-left: 15px;
	padding-right: 15px;
	font-family: var(--theme-body-font-family);

	.is-flex-inline {
		display: flex;
		justify-content: space-between;
	}

	.pr-3 {
		padding-right: 5px !important;
	}

	.s-editor-toggle input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		left: -99999999px;
	}

	.s-editor-toggle input[type='checkbox'] + label {
		outline: 0;
		display: block;
		width: 44px;
		height: 24px;
		position: relative;
		cursor: pointer;
		user-select: none;
		background: var(--black-200);
		border-radius: 1000px;
		padding: 3px;
		transition: all 0.2s ease;
	}

	.s-editor-toggle input[type='checkbox'] + label:after,
	.s-editor-toggle input[type='checkbox'] + label:before {
		position: relative;
		display: block;
		content: '';
		width: 50%;
		height: 100%;
	}

	.s-editor-toggle input[type='checkbox'] + label:after {
		left: 0;
		border-radius: 50%;
		background: #fff;
		transition: all 0.1s ease;
	}

	.s-editor-toggle input[type='checkbox'] + label:before {
		display: none;
	}

	.s-editor-toggle input[type='checkbox']:checked + label {
		background: var(--green-400);
	}

	.s-editor-toggle input[type='checkbox']:checked + label:after {
		left: 50%;
	}

	.s-editor-toggle input[type='checkbox']:focus + label {
		box-shadow: 0 0 0 4px var(--focus-ring-muted);
	}

	.s-editor-toggle input[type='checkbox']:checked:focus + label {
		box-shadow: 0 0 0 4px var(--focus-ring-success);
	}
}
