// Variables
//
// This files contains CSS variables accessible to all selectors

// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
@import '~primer-support/lib/variables/color-system.scss';

// Extracted as a SCSS variable so that we can define the --overlay-background-color
// on both the :root and the ::backdrop scope. The ::backdrop pseudo-element
// doesn't inherit :root, see
// https://bugs.chromium.org/p/chromium/issues/detail?id=594096
$overlay-background-color: rgba(0, 0, 0, 0.4);

:root {
  --color-new: #{$green-600};
  --color-deleted: #{$red-600};
  --color-modified: #{darken($yellow-700, 10%)};
  --color-renamed: #{$blue};
  --color-conflicted: #{$orange-800};

  --text-color: #{$gray-900};
  --text-secondary-color: #{$gray-500};
  --text-secondary-color-muted: #{lighten($gray-500, 30%)};
  --background-color: #{$white};

  --button-height: 25px;

  --button-background: #{$blue};
  --button-border-radius: 6px;
  --button-hover-background: #{lighten($blue, 5%)};
  --button-text-color: #{$white};
  --button-focus-border-color: #{$blue-100};

  --link-button-color: #{lighten($blue, 5%)};
  --link-button-hover-color: #{$blue-600};
  --link-button-selected-hover-color: #{$blue-200};

  --secondary-button-background: #{$gray-100};
  --secondary-button-border-color: var(--box-border-contrast-color);
  --secondary-button-hover-border-color: var(--box-border-contrast-color);
  --secondary-button-hover-background: #{$white};
  --secondary-button-text-color: var(--text-color);
  --secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)};
  --secondary-button-focus-border-color: #{$gray-300};

  /**
   * Color for icons that are placed on top of a colored backing
   * (like a circle badge icon)
   */
  --badge-icon-color: #{$white};
  --warning-badge-icon-color: #{$orange};

  // Colors used for icons that are inside an input box
  --input-icon-warning-color: #{$yellow-800};
  --input-icon-error-color: #{$red-600};
  --input-icon-hover-background-color: #{$gray-100};

  // Colors used for icons in the commit message warning/error area
  --commit-message-icon-warning-color: var(--input-icon-warning-color);
  --commit-message-icon-error-color: var(--input-icon-error-color);

  // Colors used for the separator of commit message action buttons
  // (e.g. co-authors and Copilot buttons)
  --commit-message-action-button-separator-color: var(--box-border-color);

  // Typography
  //
  // Font, line-height, and color for body text, headings, and more.
  $emoji_fallback_fonts: 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-family-sans-serif: system-ui, sans-serif, #{$emoji_fallback_fonts};
  --font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace, #{$emoji_fallback_fonts};

  /**
   * Font weight to use for semibold text
   */
  --font-weight-semibold: 600;

  /**
   * Font weight to use for light text
   */
  --font-weight-light: 300;

  // Pixel value used to responsively scale all typography. Applied to the `<html>` element.
  // When adding a new font-size variable, please update the fix-emoji-spacing.ts file.
  --font-size: 12px;
  --font-size-sm: 11px;
  --font-size-md: 14px;
  --font-size-lg: 28px;
  --font-size-xl: 32px;
  --font-size-xxl: 42px;

  /** Extra small font size, be very conservative with the use of this */
  --font-size-xs: 9px;

  /**
   * Background color for custom scroll bars.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 and linux platforms
   */
  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);

  /**
   * Background color for custom scroll bars in their active state.
   * The color is applied to the thumb part of the scrollbar.
   *
   * Note: Only applies to win32 and linux platforms
   */
  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);

  // Box
  //
  // We use the term 'box' here to refer to a very high-level generic
  // component that fits many use cases. A 'box' might be a list item
  // or an item in a tab control header. It's up to each implementation
  // to decide what states to support (active selection, selection, etc).

  --box-background-color: var(--background-color);
  --box-alt-background-color: #{$gray-100};

  /**
   * Background color for skeleton or "loading" boxes
   */
  --box-skeleton-background-color: #{$gray-200};
  --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);

  /**
   * Border color for boxes.
   */
  --box-border-color: #{$gray-200};

  // darkened version of gray-400 to get 3:1 contrast ratio against --box-alt-background-color
  --box-border-contrast-color: #{darken($gray-400, 5%)};
  --box-border-accent-color: #{$blue};

  /**
   * Background color for selected boxes without keyboard focus
   */
  --box-selected-background-color: #ebeef1;

  /**
   * Text color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-text-color: #{$gray-900};

  /**
   * Background color for when a user hovers over a boxe with a
   * pointing device. Should not be used by boxes that doesn't
   * implement a hover state since this will conflict with
   * selection and active selection
   */
  --box-hover-background-color: #{$gray-100};

  /**
   * Text color for selected boxes without keyboard focus
   */
  --box-selected-text-color: #{$gray-900};

  /**
   * Border color for selected boxes without keyboard focus
   */
  --box-selected-border-color: #{$gray-400};

  /**
   * Background color for selected boxes with active keyboard focus
   */
  --box-selected-active-background-color: #{$blue};

  /**
   * Border styles for selected boxes with active keyboard focus
   */
  --box-selected-active-border: none;

  /**
   * Text color for selected boxes with active keyboard focus
   */
  --box-selected-active-text-color: #{$white};

  /**
   * Border color for selected boxes with active keyboard focus
   */
  --box-selected-active-border-color: #{$gray-400};

  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling.
   */
  --box-overflow-shadow-background: #{linear-gradient(180deg, rgba($white, 0) 0%, rgba($white, 1) 90%, rgba($white, 1) 100%)};

  /**
   * Gradient used to indicate that content is overflowing, intended
   * for use when content can be expanded through other means than
   * scrolling. Used in conjuction with background-size, background-attachment, background-repeat.
   */
  --no-shadow-top: #{linear-gradient($white, rgba(255, 255, 255, 0))};
  --no-shadow-bottom: #{linear-gradient(rgba(255, 255, 255, 0), $white)};
  --top-shadow: #{linear-gradient(0deg, rgba($white, 0) 0%, rgba($gray-200, 0.6) 90%, rgba($gray-200, 1) 100%)};
  --bottom-shadow: #{linear-gradient(180deg, rgba($white, 0) 0%, rgba($gray-200, 0.6) 90%, rgba($gray-200, 1) 100%) 0 100%};
  --box-overflow-shadow-background-two: #{var(--no-shadow-top), var(--no-shadow-bottom) 0 100%, var(--top-shadow), var(--bottom-shadow)};

  /**
   * Text color for selected boxes with active keyboard focus
   */

  /**
   * Placeholder color for input boxes
   */
  --box-placeholder-color: #{$gray-500};

  /**
   * Author input (co-authors)
   */
  --co-author-tag-background-color: #{$blue-000};
  --co-author-tag-border-color: #{$blue-200};

  /**
   * Commit warning badge icon
   */
  --commit-warning-badge-background-color: #{$gray-000};
  --commit-warning-badge-border: #{$gray-300};

  /**
   * The height of the title bar area on Win32 platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --win32-title-bar-height: 28px;
  --win32-title-bar-background-color: #{$gray-900};

  /**
   * The height of the title bar area on darwin platforms
   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
  */
  --darwin-title-bar-height: 22px;

  --spacing: 10px;
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --spacing-quad: calc(var(--spacing) * 4);
  --spacing-quint: calc(var(--spacing) * 5);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-third: calc(var(--spacing) / 3);

  --border-radius: 6px;
  // When we use the regular border radius (6px) the outline
  // leaves a tiny gap in the corners so we drop down to a
  // similar value than Chrome's default outline border radius.
  --outlined-border-radius: 3px;
  --base-border: 1px solid var(--box-border-color);
  --contrast-border: 1px solid var(--box-border-contrast-color);

  --shadow-color: rgba(71, 83, 95, 0.19);
  --base-box-shadow: 0 2px 7px var(--shadow-color);

  --toolbar-height: 50px;

  --toolbar-background-color: #{$gray-900};
  --toolbar-border-color: #{$gray-900};
  --toolbar-text-color: #{$white};
  --toolbar-text-secondary-color: #{$gray-300};

  --toolbar-button-color: var(--toolbar-text-color);
  --toolbar-button-background-color: transparent;
  --toolbar-button-border-color: black;
  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);

  --toolbar-button-hover-color: #{$white};
  --toolbar-button-hover-background-color: #{$gray-800};
  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);

  --toolbar-button-focus-background-color: #{$gray-800};

  --toolbar-button-active-color: var(--text-color);
  --toolbar-button-active-background-color: var(--background-color);
  --toolbar-button-active-border-color: var(--background-color);

  --toolbar-button-progress-color: #{$gray-800};
  --toolbar-button-focus-progress-color: #{$gray-700};
  --toolbar-button-hover-progress-color: #{$gray-700};
  --toolbar-dropdown-open-progress-color: #{$gray-200};
  --toolbar-dropdown-text-warning-color: #{$orange-800};
  --toolbar-dropdown-text-hover-color: var(--box-hover-text-color);

  --toolbar-tooltip-background-color: #{$gray-800};
  --toolbar-tooltip-shadow-color: black;

  /**
   * App menu bar colors (Windows/Linux only)
   */
  --app-menu-button-color: var(--toolbar-text-color);
  --app-menu-button-hover-color: var(--toolbar-button-hover-color);
  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
  --app-menu-button-active-color: var(--toolbar-button-active-color);
  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);
  --app-menu-pane-color: var(--text-color);
  --app-menu-pane-secondary-color: var(--text-secondary-color);
  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);
  --app-menu-divider-color: var(--box-border-color);

  /**
    * Background color for badges inside of toolbar buttons.
    * Examples of badges are the ahead/behind bubble in the
    * push/pull button and the PR badge in the branch drop
    * down button.
    */
  --toolbar-badge-background-color: #{$gray-600};
  --toolbar-badge-active-background-color: #{$gray-200};

  --tab-bar-height: 29px;
  --tab-bar-active-color: #{$blue};
  --tab-bar-background-color: #{$white};
  --tab-bar-hover-background-color: #{$gray-100};

  /** Count bubble colors when used inside of a tab bar item */
  --tab-bar-count-color: var(--text-color);
  --tab-bar-count-background-color: #{$gray-200};

  /**
    * Badge colors when used inside of list items.
    * Example of this is the change indicators inside
    * of the repository list.
    */
  --list-item-badge-color: #{$gray-800};
  --list-item-badge-background-color: #{$gray-200};
  --list-item-selected-badge-color: #{$gray-900};
  --list-item-selected-badge-background-color: #{$gray-300};
  --list-item-selected-active-badge-color: #{$gray-900};
  --list-item-selected-active-badge-background-color: #{$white};
  --list-item-hover-background-color: #{$gray-100};

  /** Windows/Linux have custom scrollbars, see _scroll.scss */
  --win32-scroll-bar-size: 10px;
  --linux-scroll-bar-size: 10px;

  /**
   * The z-index for tooltips. Nothing should be higher, but other z-indexes can
   * be defined in terms of it.
   *
   * 20 seems arbitrary (because it is) but we have to go that high because
   * codemirror is all over the place with their z-indexes and uses at least
   * 0-6.
   */
  --tooltip-z-index: 20;
  --popup-z-index: 19;
  --popup-overlay-z-index: 18;
  --foldout-z-index: 17;
  --nudge-arrow-z-index: 16;
  --drag-overlay-z-index: 15;
  --side-panel-z-index: 14;
  // We want second level to fall under top level when scrolling
  --list-sticky-header-top-level-z-index: 11;
  --list-sticky-header-second-level-z-index: 10;

  /**
   * Toast notifications are shown temporarily for things like the zoom
   * percentage changing or the app toggling between full screen and normal
   * window mode.
   */
  --toast-notification-color: #{$gray-000};
  --toast-notification-background-color: #{rgba($gray-900, 0.6)};

  --tip-box-background-color: #{rgba($blue-500, 0.06)};
  --tip-box-border-color: #{$blue-200};

  /** The highlight color used for focus rings and focus box shadows */
  --focus-color: #{$blue};
  --diff-linenumber-focus-color: #{$blue-600};

  /**
   * Variables for form elements
   */
  --text-field-height: 25px;
  --text-field-focus-shadow-color: #{rgba($blue, 0.25)};

  /**
   * Blankslate actions, see `BlankslateAction` component.
   */
  --primary-suggested-action-background: #{$blue-000};
  --primary-suggested-action-border-color: #{$blue-200};
  --suggested-action-icon-color: #{$blue-400};

  /**
   * Diff view
   */

  --diff-line-padding-y: 2px;

  --diff-text-color: #{$gray-900};
  --diff-border-color: #{$gray-200};
  --diff-gutter-color: #{$gray-200};
  --diff-gutter-background-color: var(--background-color);

  --diff-line-number-color: #{$gray-700};
  --diff-line-number-column-width: 50px;

  --diff-selected-background-color: #{$blue-400};
  --diff-selected-border-color: #{$blue-600};
  --diff-selected-gutter-color: #{$blue-600};
  --diff-selected-text-color: var(--background-color);

  --diff-add-background-color: #{darken($green-000, 2%)};
  --diff-add-border-color: #{$green-300};
  --diff-add-gutter-color: #{$green-300};
  --diff-add-gutter-background-color: #{darken($green-100, 3%)};
  --diff-add-inner-background-color: #acf2bd;

  --diff-add-text-color: var(--diff-text-color);
  --diff-delete-background-color: #{$red-000};
  --diff-delete-border-color: #{$red-200};
  --diff-delete-gutter-color: #{$red-200};
  --diff-delete-gutter-background-color: #{$red-100};
  --diff-delete-inner-background-color: #fdb8c0;
  --diff-delete-text-color: var(--diff-text-color);

  --diff-hunk-background-color: #{$blue-000};
  --diff-hunk-border-color: #{$blue-200};
  --diff-hunk-gutter-color: #{darken($blue-200, 5%)};
  --diff-hunk-gutter-background-color: #{$blue-100};
  --diff-hunk-text-color: #{$gray-600};

  --diff-hover-background-color: #{$blue-300};
  --diff-hover-border-color: #{$blue-400};
  --diff-hover-gutter-color: #{$blue-400};
  --diff-hover-text-color: var(--background-color);

  --diff-add-hover-background-color: #{$green-300};
  --diff-add-hover-border-color: #{$green-400};
  --diff-add-hover-gutter-color: #{$green-400};
  --diff-add-hover-text-color: var(--text-color);

  --diff-delete-hover-background-color: #{$red-200};
  --diff-delete-hover-border-color: #{$red-300};
  --diff-delete-hover-gutter-color: #{$red-300};
  --diff-delete-hover-text-color: var(--text-color);

  --diff-empty-row-background-color: #{$gray-000};
  --diff-empty-row-gutter-background-color: var(--diff-empty-row-background-color);
  --diff-empty-hunk-handle: #{$gray-300};

  // Syntax highlighting text colors
  --syntax-variable-color: #6f42c1;
  --syntax-alt-variable-color: #24292e;
  --syntax-keyword-color: #d73a49;
  --syntax-atom-color: #005cc5;
  --syntax-string-color: #032f62;
  --syntax-qualifier-color: #6f42c1;
  --syntax-type-color: #d73a49;
  --syntax-comment-color: #{$gray-500};
  --syntax-tag-color: #22863a;
  --syntax-attribute-color: #6f42c1;
  --syntax-link-color: #032f62;
  --syntax-header-color: #0000ff;
  --syntax-quote-color: #1a7e31;

  // Note that this duration *must* match the `UndoCommitAnimationTimeout`
  // specified in `changes/index.tsx`.
  --undo-animation-duration: 500ms;

  // Colors for form errors
  --error-color: #{$red};
  --form-error-background: #{$red-100};
  --form-error-border-color: #{$red-200};
  --form-error-text-color: #{$red-800};

  --dialog-banner-success-background: #{$green-100};
  --dialog-banner-success-border-color: #{$green-300};
  --dialog-banner-success-text-color: #{$green-800};

  // Inline form errors, displayed after the input field
  --input-warning-text-color: var(--dialog-warning-color);
  --input-error-text-color: #{$red-800};

  /** Overlay is used as a background for both modals and foldouts */
  --overlay-background-color: #{$overlay-background-color};

  /** Dialog */
  --dialog-warning-color: #{$yellow-800};
  --dialog-information-color: #{$blue-400};
  --dialog-error-color: #{$red};

  /** Banner */
  --banner-warning-background: #{$yellow-100};
  --banner-warning-text-color: var(--text-color);
  --banner-warning-link-color: #046ee7;
  --banner-warning-icon-color: #{darken($yellow-700, 10%)};

  /** File warning */
  --file-warning-background-color: #{$yellow-100};
  --file-warning-color: #{darken($yellow-700, 10%)};
  --file-warning-border-color: #{rgba($yellow-700, 0.4)};

  /** Tooltips */
  --tooltip-background-color: #{$gray-900};
  --tooltip-color: #{$gray-100};
  --tooltip-shadow-color: #{rgba($gray-900, 0.65)};

  /** Inline paths and code */
  --path-segment-background: #{$blue-000};
  --path-segment-background-focus: #{darken($blue-000, 5%)};
  --path-segment-padding: var(--spacing-third);

  // http://easings.net/#easeOutBack
  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  // http://easings.net/#easeInBack
  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);

  // http://easings.net/#easeOutQuint
  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

  /** rebase progress bar */
  --dialog-progress-background: #{$green};

  /** merge/rebase status indicators */
  --status-pending-color: #{$yellow-700};
  --status-error-color: #{$red-500};
  --status-success-color: #1a7f37;

  // PR status icon colors
  --pr-open-icon-color: #{$green-500};
  --pr-draft-icon-color: #{$gray-500};

  // PR review colors
  --pr-timeline-line-color: var(--box-border-color);
  --pr-changes-requested-icon-color: #{$white};
  --pr-changes-requested-icon-background-color: #cf222e;
  --pr-approved-icon-color: #{$white};
  --pr-approved-icon-background-color: #2da44e;
  --pr-commented-icon-color: var(--md-fg-muted-color);
  --pr-commented-icon-background-color: #eaeef2;

  --call-to-action-bubble-border-color: #{$green};
  --call-to-action-bubble-color: #{$green};

  --title-tool-tip-background-color: rgb(236, 236, 236);
  --title-tool-tip-shadow: 1px 2px 5px 0px rgb(125, 125, 125, 0.5);

  // Markdown colors
  --md-border-default-color: #d0d7de;
  --md-border-muted-color: hsla(210, 18%, 87%, 1);
  --md-canvas-default-color: #ffffff;
  --md-canvas-subtle-color: #f6f8fa;
  --md-fg-default-color: #24292f;
  --md-fg-muted-color: #57606a;
  --md-danger-fg-color: #cf222e;
  --md-neutral-muted-color: rgba(175, 184, 193, 0.2);
  --md-accent-emphasis-color: #0969da;
  --md-accent-fg-color: #0969da;
}

::backdrop {
  --overlay-background-color: #{$overlay-background-color};
}
