/*
 * Styles for xtralab's @pierre/diffs viewer. The same surface is used by
 * the launcher dashboard's own diff tab and by the jupyterlab-git diff
 * providers, so these rules cover both hosts.
 */

/*
 * Diff viewer (main area). The `MainAreaWidget` holding the React content
 * gets sized by JupyterLab's box layout; the inner content div fills it
 * and provides vertical scroll. Horizontal scrolling within each code
 * block is owned by `@pierre/diffs` via its internal `data-code` rules.
 *
 * The block also forwards JupyterLab's theme variables onto the
 * `--diffs-*-override` properties the library exposes, so the diff
 * recolors with the active theme.
 */
.jp-xtralab-DiffWidget {
  background-color: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);
}

.lm-TabBar-tab.jp-mod-preview .lm-TabBar-tabLabel {
  font-style: italic;
}

/*
 * Flex-column container: an optional toolbar at the top (notebook view
 * mode toggle) plus a body that hosts the scrollable diff and the
 * column resize handle. Splitting these responsibilities keeps the
 * resize handle pinned to the visible viewport while the diff content
 * scrolls underneath, and keeps the toolbar always visible.
 */
.jp-xtralab-DiffWidget-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--jp-layout-color1);
  color: var(--jp-ui-font-color1);

  /*
   * Feed JupyterLab theme colors into @pierre/diffs.
   */
  --diffs-bg-override: var(--jp-layout-color1);
  --diffs-bg-buffer-override: var(--jp-layout-color1);
  --diffs-bg-context-override: var(--jp-layout-color1);
  --diffs-bg-separator-override: var(--jp-layout-color2);
  --diffs-bg-hover-override: var(--jp-layout-color2);
  --diffs-bg-selection-override: var(--jp-layout-color3);
  --diffs-bg-selection-number-override: var(--jp-layout-color3);
  --diffs-fg-override: var(--jp-ui-font-color1);
  --diffs-fg-number-override: var(--jp-ui-font-color3);
  --diffs-fg-conflict-marker-override: var(--jp-warn-color1);
  --diffs-modified-color-override: var(--jp-warn-color1);
  --diffs-addition-color-override: var(--jp-success-color1);
  --diffs-deletion-color-override: var(--jp-error-color1);
}

/*
 * Body wrapping the scrollable diff + the column resize handle. Owns
 * its own positioning context so the resizer can be absolutely placed
 * within the body's bounds (and therefore aligned with the visible
 * scroll area, not the toolbar above it).
 */
.jp-xtralab-DiffWidget-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.jp-xtralab-DiffWidget-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
}

/*
 * Segmented selectors that live in the diff toolbar: the Notebook/JSON
 * view-mode toggle (for `.ipynb` diffs) and the Split/Unified diff-style
 * toggle (for textual/code diffs). The host toolbar provides its own
 * background and border, so these are just the segmented controls.
 */
.jp-xtralab-DiffWidget-viewModeToolbarItem,
.jp-xtralab-DiffWidget-diffStyleToolbarItem {
  display: flex;
  align-items: center;
  font-size: var(--jp-ui-font-size0);
}

/*
 * Breathing room when both toggles appear (notebook diff in JSON view).
 */
.jp-xtralab-DiffWidget-diffStyleToolbarItem {
  margin-left: 4px;
}

.jp-xtralab-DiffWidget-segmented {
  display: inline-flex;
  border: var(--jp-border-width) solid var(--jp-border-color2);
  border-radius: var(--jp-border-radius);
  overflow: hidden;
  background-color: var(--jp-layout-color1);
}

.jp-xtralab-DiffWidget-segmentedButton {
  padding: 2px 10px;
  border: none;
  background: transparent;
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size0);
  line-height: 1.4;
  cursor: pointer;
}

.jp-xtralab-DiffWidget-segmentedButton:hover {
  background-color: var(--jp-layout-color2);
}

/*
 * Active segment: brand-colour fill with the inverse UI font colour — the
 * same pair JupyterLab uses to mark selected items (the command palette
 * active item, the file browser selection). The inverse font colour adapts
 * per theme, so the label stays legible on the brand fill in both themes.
 */
.jp-xtralab-DiffWidget-segmentedButton[data-active='true'] {
  background-color: var(--jp-brand-color1);
  color: var(--jp-ui-inverse-font-color1);
}

.jp-xtralab-DiffWidget-segmentedButton[data-active='true']:hover {
  background-color: var(--jp-brand-color1);
}

/*
 * Icon variant of the segmented button, used by the Split/Unified toggle.
 * The inline SVGs fill with `currentColor`, so the active/hover color rules
 * above carry over to the glyph.
 */
.jp-xtralab-DiffWidget-segmentedButton-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
}

.jp-xtralab-DiffWidget-segmentedButton-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

/*
 * Draggable column splitter. Sits on top of the diff (z-index above the
 * content) but stays a thin strip so it doesn't visually intrude. The
 * `transform: translateX(-50%)` centers the strip on the column boundary
 * the inline `left` percentage points to.
 */
.jp-xtralab-DiffWidget-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 2;
  background-color: transparent;
  transition: background-color 0.1s ease;
  user-select: none;
  touch-action: none;
}

.jp-xtralab-DiffWidget-resizer:hover,
.jp-xtralab-DiffWidget-resizer[data-dragging='true'] {
  background-color: var(--jp-brand-color1);
}

.jp-xtralab-DiffWidget-status {
  margin: 12px;
  padding: 12px;
  border-radius: 4px;
  background-color: var(--jp-layout-color2);
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size1);
  white-space: pre-wrap;
}

.jp-xtralab-DiffWidget-status[data-error='true'] {
  background-color: var(
    --jp-error-color3,
    var(--jp-rendermime-error-background)
  );
  color: var(--jp-ui-font-color1);
}

/*
 * Per-hunk action overlay. The diff library injects a row at the
 * annotation's anchor line and renders this content inside it; we keep the
 * row visually unobtrusive — a single small icon button that fades in on
 * row hover — so the annotation does not compete with the diff content.
 */
.jp-xtralab-DiffWidget-hunkAnnotation {
  display: flex;
  justify-content: flex-end;
  padding: 0 8px;
  opacity: 0.4;
  transition: opacity 0.1s ease;
}

.jp-xtralab-DiffWidget-hunkAnnotation:hover {
  opacity: 1;
}

.jp-xtralab-DiffWidget-hunkButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--jp-ui-font-color1);
  cursor: pointer;
}

.jp-xtralab-DiffWidget-hunkButton:hover {
  background-color: var(--jp-layout-color3);
}

.jp-xtralab-DiffWidget-hunkButton-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

/*
 * Notebook diff. Renders one block per cell stacked vertically, plus an
 * optional notebook-level metadata block at the bottom. Each cell carries
 * its own header (kind badge + cell index + cell type) and a body with the
 * source / outputs / metadata sub-diffs the @pierre/diffs library produces.
 *
 * The sticky header keeps the scope visible while the user scrolls through
 * a long cell, and the data-kind attributes drive the colored badges and
 * left borders that distinguish added / removed / modified / unchanged.
 */
.jp-xtralab-NotebookDiff {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
}

/*
 * The cell entry grid. Two equal columns mirror the old / new mental model
 * the column header bar establishes; each cell entry below either spans
 * both columns (modified / unchanged) or sits in a single column with an
 * empty placeholder on the other side (added / removed). Auto rows let
 * each cell pick its own height naturally.
 */
.jp-xtralab-NotebookDiff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 8px;
  align-items: stretch;
}

.jp-xtralab-NotebookDiff-cell[data-placement='full'] {
  grid-column: 1 / -1;
}

.jp-xtralab-NotebookDiff-cell[data-placement='left'] {
  grid-column: 1;
}

.jp-xtralab-NotebookDiff-cell[data-placement='right'] {
  grid-column: 2;
}

/*
 * Empty placeholder rendered in the column opposite an added or removed
 * cell. Visible (dashed outline) so the user can see the alignment gap
 * the missing cell creates between old and new. Sized roughly like a
 * minimal cell card so the row height is consistent.
 */
.jp-xtralab-NotebookDiff-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px;
  border: 1px dashed var(--jp-border-color2);
  border-radius: 4px;
  background-color: transparent;
}

.jp-xtralab-NotebookDiff-emptyLabel {
  color: var(--jp-ui-font-color3);
  font-size: var(--jp-ui-font-size0);
  font-style: italic;
}

.jp-xtralab-NotebookDiff-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--jp-border-color2);
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color1);
}

.jp-xtralab-NotebookDiff-headerCount {
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size0);
}

.jp-xtralab-NotebookDiff-stat {
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color2);
}

.jp-xtralab-NotebookDiff-stat[data-kind='modified'] {
  color: var(--jp-warn-color1);
}

.jp-xtralab-NotebookDiff-stat[data-kind='added'] {
  color: var(--jp-success-color1);
}

.jp-xtralab-NotebookDiff-stat[data-kind='removed'] {
  color: var(--jp-error-color1);
}

.jp-xtralab-NotebookDiff-cell {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--jp-border-color2);
  border-radius: 4px;
  background-color: var(--jp-layout-color1);
  overflow: hidden;
}

.jp-xtralab-NotebookDiff-cellHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background-color: var(--jp-layout-color2);
  cursor: pointer;
  user-select: none;
  font-size: var(--jp-ui-font-size1);
}

.jp-xtralab-NotebookDiff-cellHeader:hover {
  background-color: var(--jp-layout-color3);
}

.jp-xtralab-NotebookDiff-cellChevron {
  width: 12px;
  text-align: center;
  font-size: 10px;
  color: var(--jp-ui-font-color2);
}

.jp-xtralab-NotebookDiff-cellBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: var(--jp-ui-font-size0);
  font-weight: 600;
  font-family: var(--jp-code-font-family);
  background-color: var(--jp-layout-color1);
}

.jp-xtralab-NotebookDiff-cellBadge[data-kind='added'] {
  color: var(--jp-success-color1);
}

.jp-xtralab-NotebookDiff-cellBadge[data-kind='removed'] {
  color: var(--jp-error-color1);
}

.jp-xtralab-NotebookDiff-cellBadge[data-kind='modified'] {
  color: var(--jp-warn-color1);
}

.jp-xtralab-NotebookDiff-cellBadge[data-kind='unchanged'] {
  color: var(--jp-ui-font-color3);
}

.jp-xtralab-NotebookDiff-cellLabel {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--jp-ui-font-color1);
}

.jp-xtralab-NotebookDiff-cellHint {
  color: var(--jp-ui-font-color3);
  font-size: var(--jp-ui-font-size0);
  font-style: italic;
}

.jp-xtralab-NotebookDiff-cellBody {
  display: flex;
  flex-direction: column;
}

.jp-xtralab-NotebookDiff-cellEmpty {
  padding: 8px 12px;
  color: var(--jp-ui-font-color3);
  font-style: italic;
  font-size: var(--jp-ui-font-size0);
}

.jp-xtralab-NotebookDiff-subdiff {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--jp-border-color2);
}

.jp-xtralab-NotebookDiff-subdiff:first-child {
  border-top: none;
}

.jp-xtralab-NotebookDiff-subdiffLabel {
  padding: 4px 12px;
  background-color: var(--jp-layout-color1);
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-bottom: 1px solid var(--jp-border-color3);
}

/*
 * The verbatim source listing rendered when the user expands an unchanged
 * cell. We don't pass it through @pierre/diffs because there is no diff —
 * just the cell contents — but match the diff library's monospace rhythm
 * so the surrounding cells still look uniform.
 */
.jp-xtralab-NotebookDiff-unchangedSource {
  margin: 0;
  padding: 8px 12px;
  font-family: var(--jp-code-font-family);
  font-size: var(--jp-code-font-size);
  color: var(--jp-content-font-color1, var(--jp-ui-font-color1));
  white-space: pre-wrap;
  word-break: break-word;
}

.jp-xtralab-NotebookDiff-unchangedRendered,
.jp-xtralab-NotebookDiff-unchangedOutputs {
  padding: 8px 12px;
  background-color: var(--jp-layout-color1);
}

.jp-xtralab-NotebookDiff-unchangedOutputs {
  border-top: 1px solid var(--jp-border-color3);
}

/*
 * Side-by-side panes used by both OutputsSection and MarkdownPreviewSection.
 * The grid columns mirror the split-mode FileDiff above so the two halves
 * read as the same left=old / right=new mental model the user is already
 * tracking on the source diff.
 */
.jp-xtralab-NotebookDiff-sideBySide {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--jp-border-color2);
}

.jp-xtralab-NotebookDiff-sideBySideGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--jp-layout-color1);
}

.jp-xtralab-NotebookDiff-sideBySide[data-layout='single']
  .jp-xtralab-NotebookDiff-sideBySideGrid {
  grid-template-columns: 1fr;
}

/*
 * Each pane takes one column. The data-side colored bar on the left edge
 * matches the cell-block kind colors so the pane's role (old vs new) is
 * clear even in dark theme where the diff library's column-tint is subtle.
 */
.jp-xtralab-NotebookDiff-sidePane {
  padding: 8px 12px;
  min-width: 0;
  overflow-x: auto;
  background-color: var(--jp-layout-color1);
}

.jp-xtralab-NotebookDiff-sidePane[data-side='old'] {
  border-right: 1px solid var(--jp-border-color3);
  background-color: var(--jp-layout-color0, var(--jp-layout-color1));
}

.jp-xtralab-NotebookDiff-sidePane[data-side='new'] {
  background-color: var(--jp-layout-color1);
}

/*
 * Rendermime widgets bring their own padding/margin defaults; we constrain
 * them to the pane width so a wide HTML output (table, image) doesn't push
 * the grid out of shape.
 */
.jp-xtralab-NotebookDiff-sidePane .jp-RenderedHTMLCommon,
.jp-xtralab-NotebookDiff-sidePane .jp-OutputArea {
  max-width: 100%;
}

.jp-xtralab-NotebookDiff-sidePane .jp-OutputArea-output img {
  max-width: 100%;
  height: auto;
}

.jp-xtralab-NotebookDiff-fallbackText {
  margin: 0;
  font-family: var(--jp-code-font-family);
  font-size: var(--jp-code-font-size);
  color: var(--jp-content-font-color1, var(--jp-ui-font-color1));
  white-space: pre-wrap;
  word-break: break-word;
}

/*
 * Image diff (raster files). xtralab's replacement for the upstream
 * jupyterlab-git image diff: a sticky mode selector (reusing the diff
 * segmented-control styling) over the 2-up / swipe / onion-skin views.
 *
 * Every mode is sized to *fit the widget*: the images are contained
 * within the available area (never upscaled past their natural size, and
 * scaled down to fit when larger) so nothing overflows. In particular the
 * swipe/onion slider stays on screen even when the two revisions have very
 * different dimensions. A neutral checkerboard sits behind each image so
 * transparency reads clearly in both light and dark themes.
 */
.jp-xtralab-ImageDiff {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.jp-xtralab-ImageDiff-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 8px;
  background-color: var(--jp-layout-color1);
  border-bottom: 1px solid var(--jp-border-color2);
}

/*
 * The body fills the remaining height and never scrolls — each view is a
 * flex child that fits inside it (`min-height: 0` lets the flex/grid
 * children shrink below their intrinsic size so `max-height` on the
 * images can take effect).
 */
.jp-xtralab-ImageDiff-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
  padding: 16px;
}

.jp-xtralab-ImageDiff-twoUp {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 16px;
}

.jp-xtralab-ImageDiff-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/*
 * Checkerboard + border so transparent regions read clearly. The squares
 * are theme-aware (JupyterLab layout colors) so the frame stays a calm
 * light checkerboard in the light theme and a calm dark one in the dark
 * theme, rather than a bright white block.
 *
 * 2-up and onion fill their whole panel with it; the swipe view instead
 * carries it on its image-sized *frame* (not the surrounding area) so the
 * checkerboard hugs the image. That keeps the divider's top/bottom handles
 * sitting at the image edges instead of floating in the middle of a
 * checkerboard expanse.
 */
.jp-xtralab-ImageDiff-frame,
.jp-xtralab-ImageDiff-stack,
.jp-xtralab-ImageDiff-swipeFrame {
  background-color: var(--jp-layout-color1);
  background-image:
    linear-gradient(45deg, var(--jp-layout-color3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--jp-layout-color3) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--jp-layout-color3) 75%),
    linear-gradient(-45deg, transparent 75%, var(--jp-layout-color3) 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  border: 1px solid var(--jp-border-color2);
}

.jp-xtralab-ImageDiff-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.jp-xtralab-ImageDiff-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.jp-xtralab-ImageDiff-empty {
  padding: 32px 24px;
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size1);
  font-style: italic;
}

.jp-xtralab-ImageDiff-caption {
  flex: 0 0 auto;
  color: var(--jp-ui-font-color2);
  font-size: var(--jp-ui-font-size0);
  font-family: var(--jp-code-font-family);
  text-align: center;
  word-break: break-word;
}

.jp-xtralab-ImageDiff-interactive {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/*
 * Onion-skin view: both revisions occupy the same grid cell so they
 * overlay. `place-items: center` keeps each image at its own size (no
 * stretching the smaller revision up to the larger one's box) while
 * `max-height/width` scale either one down to fit the available space.
 */
.jp-xtralab-ImageDiff-stack {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 4px;
}

.jp-xtralab-ImageDiff-stackImg {
  grid-area: 1 / 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * Swipe view: a transparent container that just centers the image-sized
 * frame in whatever space the body leaves. The checkerboard lives on the
 * frame (above), not here, so it hugs the image rather than spanning the
 * panel.
 */
.jp-xtralab-ImageDiff-swipeArea {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * The frame is sized in JS (inline `width`/`height`) to exactly the
 * displayed image box. Because the frame *is* that box, the divider's
 * `left: N%`, the pointer-to-percent mapping in `setFromClientX` and each
 * image's `clip-path` inset all resolve against the same width — so the
 * white divider line sits precisely on the seam between the two revisions
 * as it is dragged. (A full-width frame instead let the line drift off the
 * seam by up to half the surrounding letterbox.)
 *
 * The whole frame is the drag target: pressing anywhere over the image
 * jumps the divider to that x and then drag-tracks the pointer (GitHub /
 * Pierre style), keeping cursor, divider and seam together.
 */
.jp-xtralab-ImageDiff-swipeFrame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  touch-action: none;
}

/*
 * Both revisions fill the frame, so an image's clip inset of N% and the
 * divider at `left: N%` cut at the same x. `object-fit: contain` only
 * letterboxes when the two revisions differ in aspect ratio; for the
 * common same-dimensions edit it fills the box exactly.
 */
.jp-xtralab-ImageDiff-swipeImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/*
 * Swipe divider: a vertical line marking the boundary between the two
 * clipped revisions. The natural seam between two clipped images is
 * barely visible — especially on light content where it disappears into
 * the background — so an explicit divider with high-contrast styling is
 * drawn on top. White core with dark outline + soft shadow keeps it
 * legible against any image, light or dark.
 *
 * The divider and its handles are the only elements that show the
 * `ew-resize` cursor — clicks anywhere over the image still bubble up
 * to the frame's drag handler, but the cursor only signals "drag me"
 * over the actual control affordances.
 */
.jp-xtralab-ImageDiff-swipeDivider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background-color: #fff;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 55%),
    0 0 6px rgb(0 0 0 / 45%);
  cursor: ew-resize;
  outline: none;
}

.jp-xtralab-ImageDiff-swipeDivider:focus-visible {
  box-shadow:
    0 0 0 1px var(--jp-brand-color1),
    0 0 0 3px rgb(33 150 243 / 35%),
    0 0 6px rgb(0 0 0 / 45%);
}

/*
 * Handle pucks at the top and bottom of the divider. The two arrows
 * inside (left + right chevrons) signal that the line can be dragged
 * sideways — matching GitHub's image diff swipe affordance.
 */
.jp-xtralab-ImageDiff-swipeDividerHandle {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 55%),
    0 2px 6px rgb(0 0 0 / 40%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: ew-resize;
}

.jp-xtralab-ImageDiff-swipeDividerHandle.jp-mod-top {
  top: -14px;
}

.jp-xtralab-ImageDiff-swipeDividerHandle.jp-mod-bottom {
  bottom: -14px;
}

/*
 * Chevron triangles drawn with borders so no asset is needed.
 */
.jp-xtralab-ImageDiff-swipeDividerArrow {
  width: 0;
  height: 0;
  border-style: solid;
}

.jp-xtralab-ImageDiff-swipeDividerArrow.jp-mod-left {
  border-width: 5px 5px 5px 0;
  border-color: transparent #333 transparent transparent;
}

.jp-xtralab-ImageDiff-swipeDividerArrow.jp-mod-right {
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #333;
}

.jp-xtralab-ImageDiff-slider {
  flex: 0 0 auto;
  width: min(480px, 100%);
  accent-color: var(--jp-brand-color1);
  cursor: ew-resize;
}