@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

// The visual canvas injects its styles into an iframe, so keep its added and
// removed colors in sync here.
$revision-diff-added-color: #00a32a;
$revision-diff-removed-color: #d63638;

$revision-diff-marker-added-color: #008a20;
$revision-diff-marker-modified-color: #9a7000;
$revision-code-diff-line-number-width: 6ch;
$revision-code-diff-marker-width: 3ch;

.editor-revisions-header__slider {
	width: 100%;

	.components-range-control__tooltip {
		white-space: nowrap;
	}
}

.editor-revisions-header__no-revisions {
	color: $gray-700;
	font-size: $default-font-size;
}

.editor-revisions-canvas__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.editor-revisions-canvas__content {
	display: flex;
	height: 100%;

	.editor-visual-editor {
		flex: 1;
		min-width: 0;
	}
}

.editor-revisions-code-diff {
	height: 100%;
	overflow: auto;
	background: $white;
	color: $gray-900;

	&:focus-visible {
		box-shadow:
			inset 0 0 0 var(--wp-admin-border-width-focus)
			var(--wp-admin-theme-color);
		outline: none;
	}
}

.editor-revisions-code-diff__table {
	width: 100%;
	min-width: max-content;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-family: $editor-html-font;
	font-size: $text-editor-font-size;
	line-height: 1.6;
}

.editor-revisions-code-diff__line {
	&.is-added {
		background: rgba($revision-diff-added-color, 0.12);

		> .editor-revisions-code-diff__line-number,
		> .editor-revisions-code-diff__marker {
			background: color-mix(in srgb, $revision-diff-added-color 12%, $white);
		}
	}

	&.is-removed {
		background: rgba($revision-diff-removed-color, 0.12);

		> .editor-revisions-code-diff__line-number,
		> .editor-revisions-code-diff__marker {
			background: color-mix(in srgb, $revision-diff-removed-color 12%, $white);
		}
	}
}

.editor-revisions-code-diff__line-number,
.editor-revisions-code-diff__marker {
	position: sticky;
	z-index: 1;
	box-sizing: border-box;
	padding: 0 $grid-unit-10;
	background: $white;
	color: $gray-700;
	text-align: right;
	white-space: nowrap;
	user-select: none;
}

.editor-revisions-code-diff__line-number {
	left: 0;
	width: $revision-code-diff-line-number-width;
	min-width: $revision-code-diff-line-number-width;
	max-width: $revision-code-diff-line-number-width;
	border-right: $border-width solid $gray-200;
	background: $gray-100;

	&.is-previous + &.is-current {
		left: $revision-code-diff-line-number-width;
	}
}

.editor-revisions-code-diff__marker {
	left: $revision-code-diff-line-number-width * 2;
	width: $revision-code-diff-marker-width;
	min-width: $revision-code-diff-marker-width;
	max-width: $revision-code-diff-marker-width;
	border-right: $border-width solid $gray-200;
	padding: 0;
	font-weight: 600;
	text-align: center;
}

.editor-revisions-code-diff__code {
	width: 100%;
	padding: 0 $grid-unit-20 0 $grid-unit-10;
	// Keep raw markup LTR even when the editor UI is RTL.
	/*rtl:ignore*/
	direction: ltr;
	unicode-bidi: isolate;
	white-space: pre;

	code {
		margin: 0;
		padding: 0;
		background: none;
		color: inherit;
		font: inherit;
	}
}

.editor-revisions-code-diff__empty {
	margin: 0;
	padding: $grid-unit-30;
	color: $gray-700;
}

// Diff markers minimap
.revision-diff-markers {
	position: relative;
	flex-shrink: 0;
	width: max(16px, 1rem);
	background: rgba(0, 0, 0, 0.05);

	.revision-diff-marker {
		position: absolute;
		width: 100%;
		min-height: 4px;
		border: none;
		padding: 0;
		cursor: var(--wpds-cursor-control);
		transition: opacity 0.1s ease;

		&.is-added {
			background: $revision-diff-marker-added-color;
		}

		&.is-removed {
			background: repeating-linear-gradient(45deg, $revision-diff-removed-color, $revision-diff-removed-color 6px, rgba($revision-diff-removed-color, 0.45) 6px, rgba($revision-diff-removed-color, 0.45) 8px);
		}

		&.is-modified {
			background: repeating-linear-gradient(-45deg, $revision-diff-marker-modified-color, $revision-diff-marker-modified-color 6px, rgba($revision-diff-marker-modified-color, 0.45) 6px, rgba($revision-diff-marker-modified-color, 0.45) 8px);
		}

		&:hover {
			opacity: 0.7;
		}

		&:focus {
			outline: 2px solid $gray-900;
			outline-offset: -2px;
		}
	}
}