@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  .cinder-source-diff-viewer {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-surface-inset);
    color: var(--cinder-text-default);
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-sm);
    line-height: var(--cinder-leading-relaxed);
  }

  .cinder-source-diff-viewer__empty {
    margin: 0;
    padding: var(--cinder-space-4);
    color: var(--cinder-text-muted);
    font-family: var(--cinder-font-sans);
  }

  /* Under the rows, a muted status and the action that renders the rest. */
  .cinder-source-diff-viewer__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cinder-space-1) var(--cinder-space-3);
    padding: var(--cinder-space-1-5) var(--cinder-space-3);
    border-block-start: 1px solid var(--cinder-border-muted);
    background: var(--cinder-surface-raised);
    font-family: var(--cinder-font-sans);
    font-size: var(--cinder-text-xs);
  }

  .cinder-source-diff-viewer__footer-status {
    color: var(--cinder-text-muted);
  }

  .cinder-source-diff-viewer__footer-status:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-source-diff-viewer__show-all {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
    padding: 0;
    border: 0;
    border-radius: var(--cinder-radius-sm);
    background: none;
    color: var(--cinder-accent-text);
    font: inherit;
    font-weight: var(--cinder-font-medium);
    white-space: nowrap;
    cursor: pointer;
  }

  @media (hover: hover) {
    .cinder-source-diff-viewer__show-all:hover {
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
  }

  .cinder-source-diff-viewer__show-all:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-source-diff-viewer__file + .cinder-source-diff-viewer__file {
    border-top: 1px solid var(--cinder-border-muted);
  }

  .cinder-source-diff-viewer__file-header {
    display: flex;
    align-items: center;
    min-block-size: 2rem;
    padding: var(--cinder-space-1-5) var(--cinder-space-3);
    border-bottom: 1px solid var(--cinder-border-muted);
    background: var(--cinder-surface-raised);
  }

  .cinder-source-diff-viewer__file-path {
    overflow-wrap: anywhere;
    color: var(--cinder-text-default);
    font-weight: var(--cinder-font-medium);
    white-space: break-spaces;
  }

  .cinder-source-diff-viewer__metadata {
    display: grid;
    gap: var(--cinder-space-0-5);
    padding: var(--cinder-space-2) var(--cinder-space-3);
    border-bottom: 1px solid var(--cinder-border-muted);
    color: var(--cinder-text-muted);
    background: var(--cinder-surface-inset);
    font-size: var(--cinder-text-xs);
  }

  .cinder-source-diff-viewer__metadata code {
    font: inherit;
    overflow-wrap: anywhere;
    white-space: break-spaces;
  }

  .cinder-source-diff-viewer__hunk + .cinder-source-diff-viewer__hunk {
    border-top: 1px solid var(--cinder-border-muted);
  }

  .cinder-source-diff-viewer__hunk-header {
    padding: var(--cinder-space-1) var(--cinder-space-3);
    background: var(--cinder-surface-inset);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    overflow-wrap: anywhere;
    white-space: break-spaces;
  }

  .cinder-source-diff-viewer__lines {
    display: grid;
  }

  .cinder-source-diff-viewer__line {
    display: grid;
    grid-template-columns: 4.5ch 4.5ch minmax(0, 1fr);
    min-inline-size: 100%;
    border-top: 1px solid transparent;
    font-variant-ligatures: none;
  }

  .cinder-source-diff-viewer__line:first-child {
    border-top: 0;
  }

  .cinder-source-diff-viewer__line[data-cinder-line-kind='addition'] {
    background: var(--cinder-status-success-background);
  }

  .cinder-source-diff-viewer__line[data-cinder-line-kind='removal'] {
    background: var(--cinder-status-danger-background);
  }

  .cinder-source-diff-viewer__line[data-cinder-line-kind='context'],
  .cinder-source-diff-viewer__line[data-cinder-line-kind='metadata'] {
    background: var(--cinder-surface-inset);
  }

  .cinder-source-diff-viewer__line-number {
    padding: 0 var(--cinder-space-2);
    border-inline-end: 1px solid var(--cinder-border-muted);
    color: var(--cinder-text-muted);
    text-align: end;
    user-select: none;
  }

  .cinder-source-diff-viewer__line-code {
    padding: 0 var(--cinder-space-3);
    overflow-wrap: anywhere;
    white-space: break-spaces;
    color: var(--cinder-text-default);
    font: inherit;
  }

  .cinder-source-diff-viewer__line:not(:has(.cinder-source-diff-viewer__line-number)) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Inline: no outer frame. The changed lines sit in their own small rounded box, as one value
   * among others, and Show all is a plain link with a chevron under it. */
  .cinder-source-diff-viewer[data-cinder-variant='inline'] {
    gap: var(--cinder-space-1);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--cinder-text-xs);
  }

  .cinder-source-diff-viewer__lines--preview {
    overflow: hidden;
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
  }

  .cinder-source-diff-viewer[data-cinder-variant='inline'] .cinder-source-diff-viewer__footer {
    justify-content: flex-start;
    padding: 0;
    border: 0;
    background: none;
  }

  @media (forced-colors: active) {
    .cinder-source-diff-viewer__show-all:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      outline-offset: 3px;
    }
  }
}