@use '../node_modules/react-diff-view/style/index.css' as react-diff-view;

.ska__diff-view {

	& > table.diff {
		table-layout: fixed;
		border-collapse: collapse;
		width: 100%;
		max-width: 100%;

		.diff-gutter-col {
			width: 7ch;
		}

		.diff-gutter-omit {
			height: 0;
		}

		.diff-gutter-omit:before {
			content: " ";
			display: block;
			white-space: pre;
			width: 2px;
			height: 100%;
			margin-left: 4.6ch;
			overflow: hidden;
			background-color: #cb2a1d;
		}

		.diff td {
			vertical-align: top;
			padding-top: 0;
			padding-bottom: 0;
		}

		.diff-decoration {
			line-height: 1.5;
			user-select: none;
		}

		.diff-decoration-content {
			font-family: var(--ska-code-font);
			padding: 0;
		}

		.diff-line {
			line-height: 1.5;
			font-family: Consolas, Courier, monospace;
		}

		.diff-gutter > a {
			color: inherit;
			display: block;
		}

		.diff-gutter,
		.diff-gutter > a {
			padding: 0 1ch;
			text-align: right;
			cursor: copy;
			user-select: none;
		}

		.diff-gutter-insert {
			background-color: #d6fedb;
		}

		.diff-gutter-delete {
			background-color: #fadde0;
		}

		.diff-gutter-omit {
			cursor: default;
		}

		.diff-gutter-selected {
			background-color: #fef6b9;
		}

		.diff-code {
			white-space: pre-wrap;
			word-wrap: break-word;
			word-break: break-all;
			padding: 0;
			padding-left: 0.5em;
		}

		.diff-code-insert {
			background-color: #eaffee;
		}

		.diff-code-edit {
			display: inline-block;
			color: inherit;
		}

		.diff-code-insert .diff-code-edit {
			background-color: #c0dc91;
		}

		.diff-code-delete {
			background-color: #fdeff0;
		}

		.diff-code-delete .diff-code-edit {
			background-color: #f39ea2;
		}

		.diff-code-selected {
			background-color: #fffce0;
		}

		.diff-omit {
			background-color: #fafbfc;
		}

		.diff-widget-content {
			vertical-align: top;
		}
	}
}