// compare.sr.ht stylesheet.
//
// Mirrors the SourceHut service pattern (see paste.sr.ht/scss/main.scss): pull
// in the shared `base` partial (Bootstrap 4 + the SourceHut chrome: contrast,
// variables, nav, events, highlight, dark) and then add only the styles unique
// to the compare/diff views.
//
// Build (dev): dart-sass with the core.sr.ht scss dir + a Bootstrap 4 scss dir
// on the load path; production uses `sassc -I /usr/share/sourcehut/scss`.

@import "base";

// Let the @pierre/trees sidebar (which styles itself with the CSS `light-dark()`
// function) and any other scheme-aware widget follow prefers-color-scheme.
:root {
  color-scheme: light dark;
}

// ---- Truncation / info banner --------------------------------------------

.compare-truncated {
  @extend .alert;
  background: lighten($warning, 30);
  border: 1px solid $warning;
  color: $gray-900;
  margin-bottom: 1rem;

  @media (prefers-color-scheme: dark) {
    background: darken($warning, 35);
    border-color: darken($warning, 20);
    color: $gray-100;
  }
}

// ---- Two-column app shell: tree sidebar + fluid diff column ---------------

#compare-app {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;

  @include media-breakpoint-down(sm) {
    flex-direction: column;
    gap: 0.5rem;
  }
}

#tree-root {
  flex: 0 0 220px;
  width: 220px;
  max-width: 220px;
  position: sticky;
  top: 0.5rem;
  max-height: calc(100vh - 1rem);
  overflow: auto;

  @include media-breakpoint-down(sm) {
    position: static;
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
    max-height: 16rem;
  }
}

#diff-root {
  flex: 1 1 auto;
  // Allow the flex child to shrink so wide code can scroll instead of
  // forcing horizontal overflow on the whole page.
  min-width: 0;
}

// ---- Layout toggle -------------------------------------------------------

.diff-layout-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.5rem;

  button {
    @extend .btn;
    @extend .btn-default;

    &.active {
      background: darken($primary, 10);
      border-color: darken($primary, 40);
      color: $white;
    }
  }
}

// ---- Per-file diff sections ----------------------------------------------

.diff-file {
  border: 1px solid $gray-400;
  margin-bottom: 1rem;
  overflow: hidden;

  @media (prefers-color-scheme: dark) {
    border-color: $gray-700;
  }
}

.diff-file-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.75rem;
  background: $gray-200;
  border-bottom: 1px solid $gray-400;
  font-family: $font_family_monospace;
  font-size: 0.9rem;

  @media (prefers-color-scheme: dark) {
    background: lighten($gray-900, 5);
    border-bottom-color: $gray-700;
  }
}

.diff-file-path {
  overflow-wrap: anywhere;
  font-weight: bold;
}

.diff-file-arrow {
  color: $gray-600;
}

.diff-file-oldpath {
  color: $gray-600;
  text-decoration: line-through;
}

.diff-file-stats {
  display: inline-flex;
  gap: 0.5rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.diff-file-add {
  color: darken($success, 10);
  @media (prefers-color-scheme: dark) {
    color: lighten($success, 10);
  }
}

.diff-file-del {
  color: darken($danger, 5);
  @media (prefers-color-scheme: dark) {
    color: lighten($danger, 5);
  }
}

.diff-file-badge {
  padding: 0 0.25rem;
  border: 1px solid $gray-500;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: $gray-700;

  @media (prefers-color-scheme: dark) {
    color: $gray-300;
    border-color: $gray-600;
  }
}

.diff-file-body {
  overflow-x: auto;
}

.diff-file-note,
.diff-empty {
  padding: 0.5rem 0.75rem;
  color: $gray-600;
  font-style: italic;
}