light.css

.mismerge {
	width: 100%;
	border: 1px solid var(--primary-200);
	border-radius: 4px;
	height: 600px;
	font-size: 1rem;
	background: var(--background);
	color: var(--primary-600);

	--background: #ffffff;

	--primary-100: #fbfcfc;
	--primary-200: #ebebeb;
	--primary-300: #a8abad;
	--primary-400: #797b7e;
	--primary-500: #3a3a3a;
	--primary-600: #323232;

	--selection: rgba(161, 240, 204, 0.25);
}

.mismerge .msm__footer {
	background-color: var(--background);
	border-top: var(--primary-200) 1px solid;
}

.mismerge .msm__footer-content span {
	color: var(--primary-400);
}

.mismerge .msm__view-content textarea {
	color: var(--primary-600);
	caret-color: var(--primary-500);
}

.mismerge .msm__view-content textarea::selection {
	background: var(--selection);
}

.mismerge .msm__connector,
.mismerge .msm__side-panel {
	background-color: var(--primary-100);
}

.mismerge .msm__side-panel {
	color: var(--primary-400);
	font-weight: 500;
}

.mismerge .msm__merge-button,
.mismerge .msm__resolve-button,
.mismerge .msm__delete-button {
	color: var(--primary-400);
}

.mismerge .msm__merge-button:hover,
.mismerge .msm__resolve-button:hover,
.mismerge .msm__delete-button:hover {
	color: var(--primary-500);
}

/* Scrollbar for Chromium-based browser */

.mismerge ::-webkit-scrollbar {
	width: 6px;
}

.mismerge ::-webkit-scrollbar-track {
	background: none;
}

.mismerge ::-webkit-scrollbar-thumb {
	background: var(--primary-200);
	border-radius: 9999px;
}

.mismerge ::-webkit-scrollbar-thumb:hover {
	background: var(--primary-400);
}