{"version":3,"file":"crash.css","mappings":"AAaA,MACE,qBACA,yBACA,0BACA,yBACA,4BAEA,sBACA,gCACA,sCACA,yBAEA,sBAEA,6BACA,4BACA,mCACA,0BACA,qCAEA,6BACA,mCACA,4CAEA,uCACA,kEACA,wEACA,0CACA,iDACA,iEACA,+CAMA,yBACA,oCAGA,oCACA,kCACA,6CAGA,qEACA,iEAIA,wEAMA,8GACA,mJAKA,4BAKA,yBAIA,kBACA,qBACA,qBACA,qBACA,qBACA,sBAGA,oBAQA,wDAQA,+DASA,gDACA,oCAKA,yCACA,oJAKA,4BAGA,qCACA,mCAKA,yCAQA,gCAQA,sCAKA,mCAKA,qCAKA,gDAKA,mCAKA,uCAKA,4CAOA,4GAOA,+DACA,kEACA,2GACA,uHACA,oIASA,iCAKA,0CACA,sCAKA,iDACA,uCAMA,+BACA,4CAMA,gCAEA,gBACA,2CACA,2CACA,yCACA,0CACA,yCACA,0CAEA,qBAIA,8BACA,iDACA,8DAEA,uCACA,iDAEA,uBAEA,oCACA,gCACA,2BACA,wCAEA,kDACA,+CACA,qCACA,sEAEA,mCACA,iDACA,wEAEA,iDAEA,iDACA,kEACA,8DAEA,yCACA,+CACA,+CACA,gDACA,+CACA,iEAEA,4CACA,sCAKA,mDACA,iEACA,uFACA,mEACA,yFACA,yCACA,6DACA,gFACA,kDAQA,0CACA,iDAEA,uBACA,gCACA,iCACA,0CAGA,yCACA,0CAOA,iCACA,4CACA,0CACA,qDACA,iDACA,yDACA,4CAGA,8BACA,8BAUA,sBACA,oBACA,4BACA,sBACA,0BACA,2BACA,yBAEA,2CACA,8CAOA,oCACA,6DAEA,oDACA,gCAGA,uBACA,wBACA,uCAKA,0BACA,yDAKA,+CACA,iDACA,uCAMA,2BAEA,2BACA,6BACA,6BACA,wDAEA,kCACA,sCAEA,0CACA,sCACA,sCACA,oDAEA,qCACA,iCACA,iCACA,4CACA,2CAEA,8CACA,wCACA,oCACA,oCACA,+CACA,8CACA,iDAEA,sCACA,kCACA,kCACA,6CACA,gCAEA,uCACA,mCACA,mCACA,iDAEA,2CACA,uCACA,uCACA,+CAEA,8CACA,0CACA,0CACA,kDAEA,2CACA,iFACA,kCAGA,iCACA,qCACA,gCACA,6BACA,+BACA,kCACA,6BACA,gCACA,4BACA,kCACA,6BACA,+BACA,8BAIA,iCAGA,uBACA,iCACA,mCACA,iCAEA,4CACA,8CACA,4CAGA,wDACA,kCAGA,+CAGA,gCACA,oCACA,8BAGA,qCACA,+CACA,qCACA,qCAGA,yCACA,8BACA,oDAGA,oCACA,yBACA,+CAGA,mCACA,yCACA,6CAGA,gEAGA,8DAGA,wDAGA,sCAGA,gCACA,8BACA,gCAGA,8BACA,+BAGA,kDACA,wCACA,sDACA,+BACA,6CACA,oDACA,8CAEA,8CACA,uCAEA,sDACA,iEAGA,mCACA,gDACA,mCACA,kCACA,+BACA,6BACA,8BACA,mDACA,oCACA,8BAGF,WACE,+CCziBF,uBACE,wBACA,YACA,cACA,WAEA,aACA,mBCsBA,4CDnBE,sCACA,gEACA,6BCLF,2CDSE,qCACA,mDACA,6BAEA,qDACE,4CACA,wBACA,kBAIJ,sCACE,kBACA,QACA,SACA,2BAEA,0CACE,WACA,WAGF,2CACE,UACA,qCAQJ,wCACE,YACA,cACA,iBAIA,+CACE,2BAEA,qBACA,kBACA,WACA,YACA,UACA,SACA,gBAGA,YACA,gBACA,gBAEA,cACA,6BACA,sCAIA,iBAEA,qDACE,aAGF,qDACE,sBACA,WAMA,4DACE,sBAGA,gBAMJ,2DACE,yBACA,WAEA,kEACE,yBAGA,gBAKJ,mDACE,kBAMR,uCAWE,eACA,UCxGA,4DD8FE,uBACA,mBCrHF,2DDyHE,uBACA,mBAQE,qEACE,yBACA,WAEA,4EACE,sBAIJ,2EACE,yBAEA,+EACE,UAGF,kFACE,yBE5JV,YAEE,kBACA,cCYF,KACE,sBAGF,qBAGE,mBASF,UAEE,YACA,WACA,SACA,UACA,gBAGF,KAEE,2BAKA,kBAGF,KAEE,0CACA,2BACA,gBAEA,wBACA,yCACA,iCAIA,8EAGE,iBACA,eAIJ,iBACE,iBACA,YAGF,IACE,uBACA,iBACA,oBAaF,kBAME,aACA,oBAGF,SAEE,yCAKF,OACE,2BAGF,SACE,aAEA,YACA,WAGF,YACE,2CACA,kCACA,aACA,OACA,mBACA,uBACA,kBACA,uBAIF,aACE,kBACA,aACA,mBACA,qBACA,uBACA,MACA,QACA,SACA,OAKF,OACE,aAGF,eACE,aACA,iCAGF,eACE,mCACA,2BAEA,wBACE,iCACA,UAIJ,WACE,kBAGF,IACE,mCACA,0BAEA,qBAEA,gBACA,cACA,gBAEA,+BACA,kBACA,gBAIE,0CACE,iBCvLN,kBCGE,gBACA,uBACA,6DDCA,2BAEA,yBAEA,sDACA,4BAEA,yCACA,oDAEA,0CAEA,kDACE,wDACA,0DAGF,wBACE,mBAGF,sCACE,WAGF,2BACE,sBAGF,4CACE,2BAIJ,yDAEE,0CACA,+BACA,0CAEA,yHACE,sCACA,gDAGF,qEACE,gDACA,sCACA,mBAIJ,uBACE,+BACA,qBACA,0BAEA,oBACA,mBAEA,6BACE,0BAGF,2CACE,WACA,eACA,qBAGF,+CACE,gCAIJ,cACE,8BACA,8BACA,YAGF,mBACE,qBACA,gBAEA,+BACE,mDACA,sDAGF,8BACE,uBACA,oDACA,uDAGF,wGAIE,uBAEA,oLACE,oBAMJ,mDAEE,UAIJ,uCACE,YACA,WElGA,wCACE,mCACA,oCACA,uBACA,eAEA,8CACE,0DACA,2CAMA,yBACA,mBACA,iBACA,4BAGA,qDACE,iEAIF,yGAEE,iBACA,iEACA,eAQN,wCACE,mCACA,oCACA,uBACA,eAEA,8CACE,0DACA,2CAMA,yBACA,mBACA,iBACA,4BAGA,qDACE,iEAIF,yGAEE,iBACA,iEACA,eCtFR,oCAEE,YAGF,WACE,aACA,sBAGF,UACE,cACA,YAEA,qBACA,qBACA,yCACA,gCACA,aCbgB,CDchB,uBACA,mCAEA,iBACA,YAEA,cAEA,mCAGF,OACE,oCACA,aACA,UACA,mBAEA,UACE,SACA,wCAGF,2BACE,UACA,aCoBc,CDnBd,YACA,4BAEA,sBAGA,eAIJ,EACE,mCACA,gBACA,cAGF,KACE,2BACA,aACA,sBACA,YACA,aAEA,aACE,UACA,aACA,mBACA,yBAEA,oBACE,gBAKN,2BACE,kBACA,qBACA,sBAEA,WAEA,WAGF,wBACE,kBACA,WACA,SAEA,WAEA,W","sources":["webpack:///./app/styles/_variables.scss","webpack:///./app/styles/ui/window/_title-bar.scss","webpack:///./app/styles/mixins/_platform.scss","webpack:///./app/styles/ui/_octicons.scss","webpack:///./app/styles/_globals.scss","webpack:///./app/styles/ui/_button.scss","webpack:///./app/styles/mixins/_ellipsis.scss","webpack:///./app/styles/ui/_scroll.scss","webpack:///./app/src/crash/styles/crash.scss","webpack:///./app/node_modules/primer-support/lib/variables/color-system.scss"],"sourcesContent":["// Variables\r\n//\r\n// This files contains CSS variables accessible to all selectors\r\n\r\n// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss\r\n@import '~primer-support/lib/variables/color-system.scss';\r\n\r\n// Extracted as a SCSS variable so that we can define the --overlay-background-color\r\n// on both the :root and the ::backdrop scope. The ::backdrop pseudo-element\r\n// doesn't inherit :root, see\r\n// https://bugs.chromium.org/p/chromium/issues/detail?id=594096\r\n$overlay-background-color: rgba(0, 0, 0, 0.4);\r\n\r\n:root {\r\n  --color-new: #{$green-600};\r\n  --color-deleted: #{$red-600};\r\n  --color-modified: #{darken($yellow-700, 10%)};\r\n  --color-renamed: #{$blue};\r\n  --color-conflicted: #{$orange-800};\r\n\r\n  --text-color: #{$gray-900};\r\n  --text-secondary-color: #{$gray-500};\r\n  --text-secondary-color-muted: #{lighten($gray-500, 30%)};\r\n  --background-color: #{$white};\r\n\r\n  --button-height: 25px;\r\n\r\n  --button-background: #{$blue};\r\n  --button-border-radius: 6px;\r\n  --button-hover-background: #{lighten($blue, 5%)};\r\n  --button-text-color: #{$white};\r\n  --button-focus-border-color: #{$blue-100};\r\n\r\n  --link-button-color: #{lighten($blue, 5%)};\r\n  --link-button-hover-color: #{$blue-600};\r\n  --link-button-selected-hover-color: #{$blue-200};\r\n\r\n  --secondary-button-background: #{$gray-100};\r\n  --secondary-button-border-color: var(--box-border-contrast-color);\r\n  --secondary-button-hover-border-color: var(--box-border-contrast-color);\r\n  --secondary-button-hover-background: #{$white};\r\n  --secondary-button-text-color: var(--text-color);\r\n  --secondary-button-focus-shadow-color: #{rgba($gray-200, 0.75)};\r\n  --secondary-button-focus-border-color: #{$gray-300};\r\n\r\n  /**\r\n   * Color for icons that are placed on top of a colored backing\r\n   * (like a circle badge icon)\r\n   */\r\n  --badge-icon-color: #{$white};\r\n  --warning-badge-icon-color: #{$orange};\r\n\r\n  // Colors used for icons that are inside an input box\r\n  --input-icon-warning-color: #{$yellow-800};\r\n  --input-icon-error-color: #{$red-600};\r\n  --input-icon-hover-background-color: #{$gray-100};\r\n\r\n  // Colors used for icons in the commit message warning/error area\r\n  --commit-message-icon-warning-color: var(--input-icon-warning-color);\r\n  --commit-message-icon-error-color: var(--input-icon-error-color);\r\n\r\n  // Colors used for the separator of commit message action buttons\r\n  // (e.g. co-authors and Copilot buttons)\r\n  --commit-message-action-button-separator-color: var(--box-border-color);\r\n\r\n  // Typography\r\n  //\r\n  // Font, line-height, and color for body text, headings, and more.\r\n  $emoji_fallback_fonts: 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol';\r\n  --font-family-sans-serif: system-ui, sans-serif, #{$emoji_fallback_fonts};\r\n  --font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace, #{$emoji_fallback_fonts};\r\n\r\n  /**\r\n   * Font weight to use for semibold text\r\n   */\r\n  --font-weight-semibold: 600;\r\n\r\n  /**\r\n   * Font weight to use for light text\r\n   */\r\n  --font-weight-light: 300;\r\n\r\n  // Pixel value used to responsively scale all typography. Applied to the `<html>` element.\r\n  // When adding a new font-size variable, please update the fix-emoji-spacing.ts file.\r\n  --font-size: 12px;\r\n  --font-size-sm: 11px;\r\n  --font-size-md: 14px;\r\n  --font-size-lg: 28px;\r\n  --font-size-xl: 32px;\r\n  --font-size-xxl: 42px;\r\n\r\n  /** Extra small font size, be very conservative with the use of this */\r\n  --font-size-xs: 9px;\r\n\r\n  /**\r\n   * Background color for custom scroll bars.\r\n   * The color is applied to the thumb part of the scrollbar.\r\n   *\r\n   * Note: Only applies to win32 and linux platforms\r\n   */\r\n  --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);\r\n\r\n  /**\r\n   * Background color for custom scroll bars in their active state.\r\n   * The color is applied to the thumb part of the scrollbar.\r\n   *\r\n   * Note: Only applies to win32 and linux platforms\r\n   */\r\n  --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);\r\n\r\n  // Box\r\n  //\r\n  // We use the term 'box' here to refer to a very high-level generic\r\n  // component that fits many use cases. A 'box' might be a list item\r\n  // or an item in a tab control header. It's up to each implementation\r\n  // to decide what states to support (active selection, selection, etc).\r\n\r\n  --box-background-color: var(--background-color);\r\n  --box-alt-background-color: #{$gray-100};\r\n\r\n  /**\r\n   * Background color for skeleton or \"loading\" boxes\r\n   */\r\n  --box-skeleton-background-color: #{$gray-200};\r\n  --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%);\r\n\r\n  /**\r\n   * Border color for boxes.\r\n   */\r\n  --box-border-color: #{$gray-200};\r\n\r\n  // darkened version of gray-400 to get 3:1 contrast ratio against --box-alt-background-color\r\n  --box-border-contrast-color: #{darken($gray-400, 5%)};\r\n  --box-border-accent-color: #{$blue};\r\n\r\n  /**\r\n   * Background color for selected boxes without keyboard focus\r\n   */\r\n  --box-selected-background-color: #ebeef1;\r\n\r\n  /**\r\n   * Text color for when a user hovers over a boxe with a\r\n   * pointing device. Should not be used by boxes that doesn't\r\n   * implement a hover state since this will conflict with\r\n   * selection and active selection\r\n   */\r\n  --box-hover-text-color: #{$gray-900};\r\n\r\n  /**\r\n   * Background color for when a user hovers over a boxe with a\r\n   * pointing device. Should not be used by boxes that doesn't\r\n   * implement a hover state since this will conflict with\r\n   * selection and active selection\r\n   */\r\n  --box-hover-background-color: #{$gray-100};\r\n\r\n  /**\r\n   * Text color for selected boxes without keyboard focus\r\n   */\r\n  --box-selected-text-color: #{$gray-900};\r\n\r\n  /**\r\n   * Border color for selected boxes without keyboard focus\r\n   */\r\n  --box-selected-border-color: #{$gray-400};\r\n\r\n  /**\r\n   * Background color for selected boxes with active keyboard focus\r\n   */\r\n  --box-selected-active-background-color: #{$blue};\r\n\r\n  /**\r\n   * Border styles for selected boxes with active keyboard focus\r\n   */\r\n  --box-selected-active-border: none;\r\n\r\n  /**\r\n   * Text color for selected boxes with active keyboard focus\r\n   */\r\n  --box-selected-active-text-color: #{$white};\r\n\r\n  /**\r\n   * Border color for selected boxes with active keyboard focus\r\n   */\r\n  --box-selected-active-border-color: #{$gray-400};\r\n\r\n  /**\r\n   * Gradient used to indicate that content is overflowing, intended\r\n   * for use when content can be expanded through other means than\r\n   * scrolling.\r\n   */\r\n  --box-overflow-shadow-background: #{linear-gradient(180deg, rgba($white, 0) 0%, rgba($white, 1) 90%, rgba($white, 1) 100%)};\r\n\r\n  /**\r\n   * Gradient used to indicate that content is overflowing, intended\r\n   * for use when content can be expanded through other means than\r\n   * scrolling. Used in conjuction with background-size, background-attachment, background-repeat.\r\n   */\r\n  --no-shadow-top: #{linear-gradient($white, rgba(255, 255, 255, 0))};\r\n  --no-shadow-bottom: #{linear-gradient(rgba(255, 255, 255, 0), $white)};\r\n  --top-shadow: #{linear-gradient(0deg, rgba($white, 0) 0%, rgba($gray-200, 0.6) 90%, rgba($gray-200, 1) 100%)};\r\n  --bottom-shadow: #{linear-gradient(180deg, rgba($white, 0) 0%, rgba($gray-200, 0.6) 90%, rgba($gray-200, 1) 100%) 0 100%};\r\n  --box-overflow-shadow-background-two: #{var(--no-shadow-top), var(--no-shadow-bottom) 0 100%, var(--top-shadow), var(--bottom-shadow)};\r\n\r\n  /**\r\n   * Text color for selected boxes with active keyboard focus\r\n   */\r\n\r\n  /**\r\n   * Placeholder color for input boxes\r\n   */\r\n  --box-placeholder-color: #{$gray-500};\r\n\r\n  /**\r\n   * Author input (co-authors)\r\n   */\r\n  --co-author-tag-background-color: #{$blue-000};\r\n  --co-author-tag-border-color: #{$blue-200};\r\n\r\n  /**\r\n   * Commit warning badge icon\r\n   */\r\n  --commit-warning-badge-background-color: #{$gray-000};\r\n  --commit-warning-badge-border: #{$gray-300};\r\n\r\n  /**\r\n   * The height of the title bar area on Win32 platforms\r\n   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'\r\n  */\r\n  --win32-title-bar-height: 28px;\r\n  --win32-title-bar-background-color: #{$gray-900};\r\n\r\n  /**\r\n   * The height of the title bar area on darwin platforms\r\n   * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'\r\n  */\r\n  --darwin-title-bar-height: 22px;\r\n\r\n  --spacing: 10px;\r\n  --spacing-double: calc(var(--spacing) * 2);\r\n  --spacing-triple: calc(var(--spacing) * 3);\r\n  --spacing-quad: calc(var(--spacing) * 4);\r\n  --spacing-quint: calc(var(--spacing) * 5);\r\n  --spacing-half: calc(var(--spacing) / 2);\r\n  --spacing-third: calc(var(--spacing) / 3);\r\n\r\n  --border-radius: 6px;\r\n  // When we use the regular border radius (6px) the outline\r\n  // leaves a tiny gap in the corners so we drop down to a\r\n  // similar value than Chrome's default outline border radius.\r\n  --outlined-border-radius: 3px;\r\n  --base-border: 1px solid var(--box-border-color);\r\n  --contrast-border: 1px solid var(--box-border-contrast-color);\r\n\r\n  --shadow-color: rgba(71, 83, 95, 0.19);\r\n  --base-box-shadow: 0 2px 7px var(--shadow-color);\r\n\r\n  --toolbar-height: 50px;\r\n\r\n  --toolbar-background-color: #{$gray-900};\r\n  --toolbar-border-color: #{$gray-900};\r\n  --toolbar-text-color: #{$white};\r\n  --toolbar-text-secondary-color: #{$gray-300};\r\n\r\n  --toolbar-button-color: var(--toolbar-text-color);\r\n  --toolbar-button-background-color: transparent;\r\n  --toolbar-button-border-color: black;\r\n  --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);\r\n\r\n  --toolbar-button-hover-color: #{$white};\r\n  --toolbar-button-hover-background-color: #{$gray-800};\r\n  --toolbar-button-hover-border-color: var(--toolbar-button-border-color);\r\n\r\n  --toolbar-button-focus-background-color: #{$gray-800};\r\n\r\n  --toolbar-button-active-color: var(--text-color);\r\n  --toolbar-button-active-background-color: var(--background-color);\r\n  --toolbar-button-active-border-color: var(--background-color);\r\n\r\n  --toolbar-button-progress-color: #{$gray-800};\r\n  --toolbar-button-focus-progress-color: #{$gray-700};\r\n  --toolbar-button-hover-progress-color: #{$gray-700};\r\n  --toolbar-dropdown-open-progress-color: #{$gray-200};\r\n  --toolbar-dropdown-text-warning-color: #{$orange-800};\r\n  --toolbar-dropdown-text-hover-color: var(--box-hover-text-color);\r\n\r\n  --toolbar-tooltip-background-color: #{$gray-800};\r\n  --toolbar-tooltip-shadow-color: black;\r\n\r\n  /**\r\n   * App menu bar colors (Windows/Linux only)\r\n   */\r\n  --app-menu-button-color: var(--toolbar-text-color);\r\n  --app-menu-button-hover-color: var(--toolbar-button-hover-color);\r\n  --app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);\r\n  --app-menu-button-active-color: var(--toolbar-button-active-color);\r\n  --app-menu-button-active-background-color: var(--toolbar-button-active-background-color);\r\n  --app-menu-pane-color: var(--text-color);\r\n  --app-menu-pane-secondary-color: var(--text-secondary-color);\r\n  --app-menu-pane-background-color: var(--toolbar-button-active-background-color);\r\n  --app-menu-divider-color: var(--box-border-color);\r\n\r\n  /**\r\n    * Background color for badges inside of toolbar buttons.\r\n    * Examples of badges are the ahead/behind bubble in the\r\n    * push/pull button and the PR badge in the branch drop\r\n    * down button.\r\n    */\r\n  --toolbar-badge-background-color: #{$gray-600};\r\n  --toolbar-badge-active-background-color: #{$gray-200};\r\n\r\n  --tab-bar-height: 29px;\r\n  --tab-bar-active-color: #{$blue};\r\n  --tab-bar-background-color: #{$white};\r\n  --tab-bar-hover-background-color: #{$gray-100};\r\n\r\n  /** Count bubble colors when used inside of a tab bar item */\r\n  --tab-bar-count-color: var(--text-color);\r\n  --tab-bar-count-background-color: #{$gray-200};\r\n\r\n  /**\r\n    * Badge colors when used inside of list items.\r\n    * Example of this is the change indicators inside\r\n    * of the repository list.\r\n    */\r\n  --list-item-badge-color: #{$gray-800};\r\n  --list-item-badge-background-color: #{$gray-200};\r\n  --list-item-selected-badge-color: #{$gray-900};\r\n  --list-item-selected-badge-background-color: #{$gray-300};\r\n  --list-item-selected-active-badge-color: #{$gray-900};\r\n  --list-item-selected-active-badge-background-color: #{$white};\r\n  --list-item-hover-background-color: #{$gray-100};\r\n\r\n  /** Windows/Linux have custom scrollbars, see _scroll.scss */\r\n  --win32-scroll-bar-size: 10px;\r\n  --linux-scroll-bar-size: 10px;\r\n\r\n  /**\r\n   * The z-index for tooltips. Nothing should be higher, but other z-indexes can\r\n   * be defined in terms of it.\r\n   *\r\n   * 20 seems arbitrary (because it is) but we have to go that high because\r\n   * codemirror is all over the place with their z-indexes and uses at least\r\n   * 0-6.\r\n   */\r\n  --tooltip-z-index: 20;\r\n  --popup-z-index: 19;\r\n  --popup-overlay-z-index: 18;\r\n  --foldout-z-index: 17;\r\n  --nudge-arrow-z-index: 16;\r\n  --drag-overlay-z-index: 15;\r\n  --side-panel-z-index: 14;\r\n  // We want second level to fall under top level when scrolling\r\n  --list-sticky-header-top-level-z-index: 11;\r\n  --list-sticky-header-second-level-z-index: 10;\r\n\r\n  /**\r\n   * Toast notifications are shown temporarily for things like the zoom\r\n   * percentage changing or the app toggling between full screen and normal\r\n   * window mode.\r\n   */\r\n  --toast-notification-color: #{$gray-000};\r\n  --toast-notification-background-color: #{rgba($gray-900, 0.6)};\r\n\r\n  --tip-box-background-color: #{rgba($blue-500, 0.06)};\r\n  --tip-box-border-color: #{$blue-200};\r\n\r\n  /** The highlight color used for focus rings and focus box shadows */\r\n  --focus-color: #{$blue};\r\n  --accent-color: #{$blue-400};\r\n  --diff-linenumber-focus-color: #{$blue-600};\r\n\r\n  /**\r\n   * Variables for form elements\r\n   */\r\n  --text-field-height: 25px;\r\n  --text-field-focus-shadow-color: #{rgba($blue, 0.25)};\r\n\r\n  /**\r\n   * Blankslate actions, see `BlankslateAction` component.\r\n   */\r\n  --primary-suggested-action-background: #{$blue-000};\r\n  --primary-suggested-action-border-color: #{$blue-200};\r\n  --suggested-action-icon-color: #{$blue-400};\r\n\r\n  /**\r\n   * Diff view\r\n   */\r\n\r\n  --diff-line-padding-y: 2px;\r\n\r\n  --diff-text-color: #{$gray-900};\r\n  --diff-border-color: #{$gray-200};\r\n  --diff-gutter-color: #{$gray-200};\r\n  --diff-gutter-background-color: var(--background-color);\r\n\r\n  --diff-line-number-color: #{$gray-700};\r\n  --diff-line-number-column-width: 50px;\r\n\r\n  --diff-selected-background-color: #{$blue-400};\r\n  --diff-selected-border-color: #{$blue-600};\r\n  --diff-selected-gutter-color: #{$blue-600};\r\n  --diff-selected-text-color: var(--background-color);\r\n\r\n  --diff-add-background-color: #{darken($green-000, 2%)};\r\n  --diff-add-border-color: #{$green-300};\r\n  --diff-add-gutter-color: #{$green-300};\r\n  --diff-add-gutter-background-color: #{darken($green-100, 3%)};\r\n  --diff-add-inner-background-color: #acf2bd;\r\n\r\n  --diff-add-text-color: var(--diff-text-color);\r\n  --diff-delete-background-color: #{$red-000};\r\n  --diff-delete-border-color: #{$red-200};\r\n  --diff-delete-gutter-color: #{$red-200};\r\n  --diff-delete-gutter-background-color: #{$red-100};\r\n  --diff-delete-inner-background-color: #fdb8c0;\r\n  --diff-delete-text-color: var(--diff-text-color);\r\n\r\n  --diff-hunk-background-color: #{$blue-000};\r\n  --diff-hunk-border-color: #{$blue-200};\r\n  --diff-hunk-gutter-color: #{darken($blue-200, 5%)};\r\n  --diff-hunk-gutter-background-color: #{$blue-100};\r\n  --diff-hunk-text-color: #{$gray-600};\r\n\r\n  --diff-hover-background-color: #{$blue-300};\r\n  --diff-hover-border-color: #{$blue-400};\r\n  --diff-hover-gutter-color: #{$blue-400};\r\n  --diff-hover-text-color: var(--background-color);\r\n\r\n  --diff-add-hover-background-color: #{$green-300};\r\n  --diff-add-hover-border-color: #{$green-400};\r\n  --diff-add-hover-gutter-color: #{$green-400};\r\n  --diff-add-hover-text-color: var(--text-color);\r\n\r\n  --diff-delete-hover-background-color: #{$red-200};\r\n  --diff-delete-hover-border-color: #{$red-300};\r\n  --diff-delete-hover-gutter-color: #{$red-300};\r\n  --diff-delete-hover-text-color: var(--text-color);\r\n\r\n  --diff-empty-row-background-color: #{$gray-000};\r\n  --diff-empty-row-gutter-background-color: var(--diff-empty-row-background-color);\r\n  --diff-empty-hunk-handle: #{$gray-300};\r\n\r\n  // Syntax highlighting text colors\r\n  --syntax-variable-color: #6f42c1;\r\n  --syntax-alt-variable-color: #24292e;\r\n  --syntax-keyword-color: #d73a49;\r\n  --syntax-atom-color: #005cc5;\r\n  --syntax-string-color: #032f62;\r\n  --syntax-qualifier-color: #6f42c1;\r\n  --syntax-type-color: #d73a49;\r\n  --syntax-comment-color: #{$gray-500};\r\n  --syntax-tag-color: #22863a;\r\n  --syntax-attribute-color: #6f42c1;\r\n  --syntax-link-color: #032f62;\r\n  --syntax-header-color: #0000ff;\r\n  --syntax-quote-color: #1a7e31;\r\n\r\n  // Note that this duration *must* match the `UndoCommitAnimationTimeout`\r\n  // specified in `changes/index.tsx`.\r\n  --undo-animation-duration: 500ms;\r\n\r\n  // Colors for form errors\r\n  --error-color: #{$red};\r\n  --form-error-background: #{$red-100};\r\n  --form-error-border-color: #{$red-200};\r\n  --form-error-text-color: #{$red-800};\r\n\r\n  --dialog-banner-success-background: #{$green-100};\r\n  --dialog-banner-success-border-color: #{$green-300};\r\n  --dialog-banner-success-text-color: #{$green-800};\r\n\r\n  // Inline form errors, displayed after the input field\r\n  --input-warning-text-color: var(--dialog-warning-color);\r\n  --input-error-text-color: #{$red-800};\r\n\r\n  /** Overlay is used as a background for both modals and foldouts */\r\n  --overlay-background-color: #{$overlay-background-color};\r\n\r\n  /** Dialog */\r\n  --dialog-warning-color: #{$yellow-800};\r\n  --dialog-information-color: #{$blue-400};\r\n  --dialog-error-color: #{$red};\r\n\r\n  /** Banner */\r\n  --banner-warning-background: #{$yellow-100};\r\n  --banner-warning-text-color: var(--text-color);\r\n  --banner-warning-link-color: #046ee7;\r\n  --banner-warning-icon-color: #{darken($yellow-700, 10%)};\r\n\r\n  /** File warning */\r\n  --file-warning-background-color: #{$yellow-100};\r\n  --file-warning-color: #{darken($yellow-700, 10%)};\r\n  --file-warning-border-color: #{rgba($yellow-700, 0.4)};\r\n\r\n  /** Tooltips */\r\n  --tooltip-background-color: #{$gray-900};\r\n  --tooltip-color: #{$gray-100};\r\n  --tooltip-shadow-color: #{rgba($gray-900, 0.65)};\r\n\r\n  /** Inline paths and code */\r\n  --path-segment-background: #{$blue-000};\r\n  --path-segment-background-focus: #{darken($blue-000, 5%)};\r\n  --path-segment-padding: var(--spacing-third);\r\n\r\n  // http://easings.net/#easeOutBack\r\n  --easing-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n\r\n  // http://easings.net/#easeInBack\r\n  --easing-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);\r\n\r\n  // http://easings.net/#easeOutQuint\r\n  --easing-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);\r\n\r\n  /** rebase progress bar */\r\n  --dialog-progress-background: #{$green};\r\n\r\n  /** merge/rebase status indicators */\r\n  --status-pending-color: #{$yellow-700};\r\n  --status-error-color: #{$red-500};\r\n  --status-success-color: #1a7f37;\r\n\r\n  // PR status icon colors\r\n  --pr-open-icon-color: #{$green-500};\r\n  --pr-draft-icon-color: #{$gray-500};\r\n\r\n  // PR review colors\r\n  --pr-timeline-line-color: var(--box-border-color);\r\n  --pr-changes-requested-icon-color: #{$white};\r\n  --pr-changes-requested-icon-background-color: #cf222e;\r\n  --pr-approved-icon-color: #{$white};\r\n  --pr-approved-icon-background-color: #2da44e;\r\n  --pr-commented-icon-color: var(--md-fg-muted-color);\r\n  --pr-commented-icon-background-color: #eaeef2;\r\n\r\n  --call-to-action-bubble-border-color: #{$green};\r\n  --call-to-action-bubble-color: #{$green};\r\n\r\n  --title-tool-tip-background-color: rgb(236, 236, 236);\r\n  --title-tool-tip-shadow: 1px 2px 5px 0px rgb(125, 125, 125, 0.5);\r\n\r\n  // Markdown colors\r\n  --md-border-default-color: #d0d7de;\r\n  --md-border-muted-color: hsla(210, 18%, 87%, 1);\r\n  --md-canvas-default-color: #ffffff;\r\n  --md-canvas-subtle-color: #f6f8fa;\r\n  --md-fg-default-color: #24292f;\r\n  --md-fg-muted-color: #57606a;\r\n  --md-danger-fg-color: #cf222e;\r\n  --md-neutral-muted-color: rgba(175, 184, 193, 0.2);\r\n  --md-accent-emphasis-color: #0969da;\r\n  --md-accent-fg-color: #0969da;\r\n}\r\n\r\n::backdrop {\r\n  --overlay-background-color: #{$overlay-background-color};\r\n}\r\n","@import '../../mixins';\r\n\r\n#desktop-app-title-bar {\r\n  -webkit-app-region: drag;\r\n  flex-grow: 0;\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  @include darwin {\r\n    height: var(--darwin-title-bar-height);\r\n    background: linear-gradient(to bottom, #3b3f46 0%, #2b2e33 100%);\r\n    border-bottom: 1px solid #000;\r\n  }\r\n\r\n  @include win32 {\r\n    height: var(--win32-title-bar-height);\r\n    background: var(--win32-title-bar-background-color);\r\n    border-bottom: 1px solid #000;\r\n\r\n    .app-icon {\r\n      color: var(--toolbar-button-secondary-color);\r\n      margin: 0 var(--spacing);\r\n      align-self: center;\r\n    }\r\n  }\r\n\r\n  .resize-handle {\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    -webkit-app-region: no-drag;\r\n\r\n    &.top {\r\n      width: 100%;\r\n      height: 3px;\r\n    }\r\n\r\n    &.left {\r\n      width: 3px;\r\n      height: var(--win32-title-bar-height);\r\n    }\r\n  }\r\n\r\n  // Window controls is the container for the three buttons minimize,\r\n  // maximize/restore and close. On macOS the controls are added\r\n  // automatically even for borderless window so we only render\r\n  // controls on Windows.\r\n  .window-controls {\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n    margin-left: auto;\r\n\r\n    // Each button contains a single SVG element with a Windows 10-replica\r\n    // icon for the function it represents\r\n    button {\r\n      -webkit-app-region: no-drag;\r\n\r\n      display: inline-block;\r\n      position: relative;\r\n      width: 45px;\r\n      height: 100%;\r\n      padding: 0;\r\n      margin: 0;\r\n      overflow: hidden;\r\n\r\n      // Reset styles from global buttons\r\n      border: none;\r\n      box-shadow: none;\r\n      border-radius: 0;\r\n\r\n      color: #a0a0a0;\r\n      background-color: transparent;\r\n      transition: background-color 0.25s ease;\r\n\r\n      // Explicitly setting the line height to the height\r\n      // of the SVG illustrations helps with vertical alignment.\r\n      line-height: 10px;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n\r\n      &:hover {\r\n        background-color: #888;\r\n        color: #fff;\r\n\r\n        // Doing :hover:active as oposed to just :active is\r\n        // a conscious choice to match how the real Windows\r\n        // controls behave when someone hovers, clicks and then\r\n        // moves away from the hitbox.\r\n        &:active {\r\n          background-color: #666;\r\n\r\n          // Immediate feedback when clicking\r\n          transition: none;\r\n        }\r\n      }\r\n\r\n      // Close button is a special case, it needs to be red\r\n      // on hover and slightly lighter red on active.\r\n      &.close:hover {\r\n        background-color: #e81123;\r\n        color: #fff;\r\n\r\n        &:active {\r\n          background-color: #bf0f1d;\r\n\r\n          // Immediate feedback when clicking\r\n          transition: none;\r\n        }\r\n      }\r\n\r\n      /* https://css-tricks.com/cascading-svg-fill-color/ */\r\n      svg {\r\n        fill: currentColor;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n#desktop-app-title-bar.light-title-bar {\r\n  @include darwin {\r\n    background: transparent;\r\n    border-bottom: none;\r\n  }\r\n\r\n  @include win32 {\r\n    background: transparent;\r\n    border-bottom: none;\r\n  }\r\n\r\n  position: fixed;\r\n  z-index: 1;\r\n\r\n  .window-controls {\r\n    button {\r\n      &:hover {\r\n        background-color: #e5e5e5;\r\n        color: #000;\r\n\r\n        &:active {\r\n          background-color: #cccccc;\r\n        }\r\n      }\r\n\r\n      &.close:hover {\r\n        background-color: #e81123;\r\n\r\n        svg {\r\n          fill: #fff;\r\n        }\r\n\r\n        &:active {\r\n          background-color: #f1707a;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n","// A mixin which takes a content block that should only\r\n// be applied when the current (real or emulated) operating\r\n// system is windows\r\n//\r\n// This helper mixin is useful in so far that it allows us\r\n// to keep platform specific styles next to cross-platform\r\n// styles instead of splitting them out and possibly forgetting\r\n// about them.\r\n@mixin win32 {\r\n  body.platform-win32 & {\r\n    @content;\r\n  }\r\n}\r\n\r\n// An exact copy of the win32 mixin except that it allows for\r\n// writing base-level rules\r\n@mixin win32-context {\r\n  body.platform-win32 {\r\n    @content;\r\n  }\r\n}\r\n\r\n// A mixin which takes a content block that should only\r\n// be applied when the current (real or emulated) operating\r\n// system is macOS.\r\n//\r\n// This helper mixin is useful in so far that it allows us\r\n// to keep platform specific styles next to cross-platform\r\n// styles instead of splitting them out and possibly forgetting\r\n// about them.\r\n@mixin darwin {\r\n  body.platform-darwin & {\r\n    @content;\r\n  }\r\n}\r\n\r\n// An exact copy of the darwin mixin except that it allows for\r\n// writing base-level rules\r\n@mixin darwin-context {\r\n  body.platform-darwin {\r\n    @content;\r\n  }\r\n}\r\n\r\n// A mixin which takes a content block that should only\r\n// be applied when the current (real or emulated) operating\r\n// system is Linux.\r\n//\r\n// This helper mixin is useful in so far that it allows us\r\n// to keep platform specific styles next to cross-platform\r\n// styles instead of splitting them out and possibly forgetting\r\n// about them.\r\n@mixin linux {\r\n  body.platform-linux & {\r\n    @content;\r\n  }\r\n}\r\n\r\n// An exact copy of the linux mixin except that it allows for\r\n// writing base-level rules\r\n@mixin linux-context {\r\n  body.platform-linux {\r\n    @content;\r\n  }\r\n}\r\n","svg.octicon {\r\n  /* https://css-tricks.com/cascading-svg-fill-color/ */\r\n  fill: currentColor;\r\n  flex-shrink: 0;\r\n}\r\n","// Globals\r\n//\r\n// This file is for things that have to apply globally, if your style\r\n// doesn't fit into that description it probably belongs in ui/\r\n\r\n// Reset the box-sizing, lifted from bootstrap reboot css, see:\r\n//   https://github.com/twbs/bootstrap/blob/bfc16c4a829ba596db28f5f42d7a3e429e6ea2e1/scss/_reboot.scss#L9\r\n//\r\n// Change from `box-sizing: content-box` to `border-box` so that when you add\r\n// `padding` or `border`s to an element, the overall declared `width` does not\r\n// change. For example, `width: 100px;` will always be `100px` despite the\r\n// `border: 10px solid red;` and `padding: 20px;`.\r\n//\r\n// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/\r\n\r\nhtml {\r\n  box-sizing: border-box;\r\n}\r\n\r\n*,\r\n*::before,\r\n*::after {\r\n  box-sizing: inherit;\r\n}\r\n\r\n//\r\n// Reset HTML, body, and more\r\n//\r\n\r\n// We never want the window to be scrollable, everything has to fit\r\n// or be placed into a scrollable container.\r\nhtml,\r\nbody {\r\n  height: 100%;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n}\r\n\r\nhtml {\r\n  // Sets a specific default `font-size` for user with `rem` type scales.\r\n  font-size: var(--font-size);\r\n\r\n  // NB This seems to be necessary on macOS (and possibly others)\r\n  // for the absolutely positioned foldout to fill the window\r\n  // when it's being resized.\r\n  position: relative;\r\n}\r\n\r\nbody {\r\n  // https://css-tricks.com/html-vs-body-in-css/\r\n  font-family: var(--font-family-sans-serif);\r\n  font-size: var(--font-size);\r\n  line-height: 1.5;\r\n\r\n  color: var(--text-color);\r\n  background-color: var(--background-color);\r\n  accent-color: var(--accent-color);\r\n}\r\n\r\n:not(input, textarea) {\r\n  &,\r\n  &::after,\r\n  &::before {\r\n    user-select: none;\r\n    cursor: default;\r\n  }\r\n}\r\n\r\n.selectable-text {\r\n  user-select: text;\r\n  cursor: auto;\r\n}\r\n\r\nimg {\r\n  -webkit-user-drag: none;\r\n  user-select: none;\r\n  pointer-events: none;\r\n}\r\n\r\n//\r\n// Typography\r\n//\r\n\r\n// Remove top margins from headings\r\n//\r\n// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top\r\n// margin for easier control within type scales as it avoids margin collapsing.\r\n//\r\n// From: https://github.com/twbs/bootstrap/blob/a0f10e6dcb9aef2d8e36e57f3c8b1b06034a8877/scss/_reboot.scss\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6 {\r\n  margin-top: 0;\r\n  margin-bottom: 0.5rem;\r\n}\r\n\r\ncode,\r\npre {\r\n  font-family: var(--font-family-monospace);\r\n}\r\n\r\n// Regardless of platform behavior we never want buttons to be\r\n// app drag targets unless explicitly specified.\r\nbutton {\r\n  -webkit-app-region: no-drag;\r\n}\r\n\r\n#content {\r\n  display: flex;\r\n\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n.blankslate {\r\n  background: var(--box-alt-background-color);\r\n  color: var(--text-secondary-color);\r\n  display: flex;\r\n  flex: 1;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  padding: var(--spacing);\r\n}\r\n\r\n// Stretches an element to fill the entire window (such as an overlay)\r\n.fill-window {\r\n  position: absolute;\r\n  display: flex;\r\n  align-items: center;\r\n  align-content: center;\r\n  justify-content: center;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n}\r\n\r\n// By default we don't want to show the focus ring on elements unless the focus\r\n// occurred as a result of keyboard navigation.\r\n:focus {\r\n  outline: none;\r\n}\r\n\r\n:focus-visible {\r\n  outline: auto;\r\n  outline-color: var(--focus-color);\r\n}\r\n\r\n.more-dropdown {\r\n  color: var(--text-color) !important;\r\n  margin-left: var(--spacing);\r\n\r\n  .octicon {\r\n    margin-left: var(--spacing-third);\r\n    width: 8px;\r\n  }\r\n}\r\n\r\n.brutalism {\r\n  background: salmon;\r\n}\r\n\r\nkbd {\r\n  border-radius: var(--border-radius);\r\n  border: var(--base-border);\r\n\r\n  display: inline-block;\r\n\r\n  padding: 1px 2px;\r\n  line-height: 1;\r\n  min-height: 16px;\r\n\r\n  font-family: var(--font-family);\r\n  text-align: center;\r\n  min-width: 1.5em;\r\n\r\n  @include darwin {\r\n    // On macOS, kbd elements are not separated by a +, so let's add a margin\r\n    &:not(:last-child) {\r\n      margin-right: 2px;\r\n    }\r\n  }\r\n}\r\n","@import '../mixins';\r\n\r\n.button-component {\r\n  @include ellipsis;\r\n  // Chrome on Windows ignores the body element\r\n  // font-family and uses Arial so we redefine\r\n  // it here\r\n  font-family: var(--font-family-sans-serif);\r\n  font-size: var(--font-size);\r\n\r\n  padding: 0 var(--spacing);\r\n\r\n  border: 1px solid var(--secondary-button-border-color);\r\n  height: var(--button-height);\r\n\r\n  color: var(--secondary-button-text-color);\r\n  background-color: var(--secondary-button-background);\r\n\r\n  border-radius: var(--button-border-radius);\r\n\r\n  &:not([aria-disabled='true']):hover {\r\n    border-color: var(--secondary-button-hover-border-color);\r\n    background-color: var(--secondary-button-hover-background);\r\n  }\r\n\r\n  &:focus {\r\n    outline-offset: 4px;\r\n  }\r\n\r\n  &[aria-disabled='true'] {\r\n    opacity: 0.6;\r\n  }\r\n\r\n  .octicon {\r\n    vertical-align: middle;\r\n  }\r\n\r\n  &.button-with-icon .octicon {\r\n    margin-left: var(--spacing);\r\n  }\r\n}\r\n\r\n.button-component[type='submit'],\r\n.button-component-primary {\r\n  background-color: var(--button-background);\r\n  color: var(--button-text-color);\r\n  border: 1px solid var(--button-background);\r\n\r\n  &:not([aria-disabled='true']):hover {\r\n    border-color: var(--button-background);\r\n    background-color: var(--button-hover-background);\r\n  }\r\n\r\n  &:focus {\r\n    background-color: var(--button-hover-background);\r\n    border-color: var(--button-background);\r\n    outline-offset: 4px;\r\n  }\r\n}\r\n\r\n.link-button-component {\r\n  color: var(--link-button-color);\r\n  text-decoration: none;\r\n  cursor: pointer !important;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &[aria-disabled='true'] {\r\n    opacity: 0.6;\r\n    cursor: default;\r\n    text-decoration: none;\r\n  }\r\n\r\n  &.link-with-icon .octicon {\r\n    margin-left: var(--spacing-half);\r\n  }\r\n}\r\n\r\n.small-button {\r\n  font-size: var(--font-size-sm);\r\n  padding: 0 var(--spacing-half);\r\n  height: 21px;\r\n}\r\n\r\n.button-group-item {\r\n  border-right-width: 0;\r\n  border-radius: 0;\r\n\r\n  &:first-child {\r\n    border-top-left-radius: var(--button-border-radius);\r\n    border-bottom-left-radius: var(--button-border-radius);\r\n  }\r\n\r\n  &:last-child {\r\n    border-right-width: 1px;\r\n    border-top-right-radius: var(--button-border-radius);\r\n    border-bottom-right-radius: var(--button-border-radius);\r\n  }\r\n\r\n  &.selected,\r\n  &:focus,\r\n  &:active,\r\n  &:hover {\r\n    border-right-width: 1px;\r\n\r\n    + .button-group-item {\r\n      border-left-width: 0;\r\n    }\r\n  }\r\n}\r\n\r\n.button-group-item {\r\n  &:focus,\r\n  &:active {\r\n    z-index: 1;\r\n  }\r\n}\r\n\r\n.button-component.copy-button .octicon {\r\n  height: 12px;\r\n  width: 12px;\r\n}\r\n","/**\r\n * Enable end-of-line text truncation when text overflows\r\n * the horizontal boundary of its container.\r\n */\r\n@mixin ellipsis {\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n","@import '../mixins';\r\n\r\n@include win32-context {\r\n  // Windows native scrollbars are just too outdated to look at so we'll\r\n  // have to make some ourselves. Unfortunately for us webkit isn't as\r\n  // flexible as one would hope when it comes to styling scroll bars.\r\n  //\r\n  // We're unable to perform any css transition on say width or height\r\n  // which we'd really like to in order to smoothly grow the scrollbar\r\n  // when the mouse is close. Nor can we transition on opacity in order\r\n  // to smoothly show or hide the scroll bar on hover.\r\n  //\r\n  // We're not able to use margins/paddings to offset the bar away from\r\n  // the edge of the container. There's a hack we can employ with\r\n  // background-clip that lets us use a border to offset though.\r\n  // See http://stackoverflow.com/a/21684424/2114\r\n  //\r\n  // The biggest limitation however is the fact that we're unable to\r\n  // have the scroll bar sit on top of the content itself. Adding a\r\n  // scroll bar automatically adds a padding equal to that of the scroll\r\n  // bar width/height to the container and there's no way (that I've found)\r\n  // to get around that. The scroll bar seems to sample its background\r\n  // from the container and never its content.\r\n  //\r\n  // We work around that in List elements by introducing a fake overflowing\r\n  // element which is absolutely positioned on top of the main content.\r\n  // See List.tsx and _list.scss.\r\n  ::-webkit-scrollbar {\r\n    width: var(--win32-scroll-bar-size);\r\n    height: var(--win32-scroll-bar-size);\r\n    background: transparent;\r\n    cursor: pointer;\r\n\r\n    &-thumb {\r\n      background-color: var(--scroll-bar-thumb-background-color);\r\n      border-radius: var(--win32-scroll-bar-size);\r\n\r\n      // This little hack allows us to have a slim scroll bar\r\n      // with a bigger hit area. The scroll bar width/height\r\n      // is 10px but we're cutting off 6px using clipping so\r\n      // that it appears as if it's actually only 4px.\r\n      border-color: transparent;\r\n      border-style: solid;\r\n      border-width: 3px;\r\n      background-clip: padding-box;\r\n\r\n      // ...and when it's pressed we'll up the contrast\r\n      &:active {\r\n        background-color: var(--scroll-bar-thumb-background-color-active);\r\n      }\r\n\r\n      // When someone hovers over, or presses the bar we'll expand it to 8px\r\n      &:hover,\r\n      &:active {\r\n        border-width: 1px;\r\n        background-color: var(--scroll-bar-thumb-background-color-active);\r\n        cursor: pointer;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n@include linux-context {\r\n  // Linux scrollbars need styled, too\r\n  ::-webkit-scrollbar {\r\n    width: var(--linux-scroll-bar-size);\r\n    height: var(--linux-scroll-bar-size);\r\n    background: transparent;\r\n    cursor: pointer;\r\n\r\n    &-thumb {\r\n      background-color: var(--scroll-bar-thumb-background-color);\r\n      border-radius: var(--linux-scroll-bar-size);\r\n\r\n      // This little hack allows us to have a slim scroll bar\r\n      // with a bigger hit area. The scroll bar width/height\r\n      // is 10px but we're cutting off 6px using clipping so\r\n      // that it appears as if it's actually only 4px.\r\n      border-color: transparent;\r\n      border-style: solid;\r\n      border-width: 3px;\r\n      background-clip: padding-box;\r\n\r\n      // ...and when it's pressed we'll up the contrast\r\n      &:active {\r\n        background-color: var(--scroll-bar-thumb-background-color-active);\r\n      }\r\n\r\n      // When someone hovers over, or presses the bar we'll expand it to 8px\r\n      &:hover,\r\n      &:active {\r\n        border-width: 1px;\r\n        background-color: var(--scroll-bar-thumb-background-color-active);\r\n        cursor: pointer;\r\n      }\r\n    }\r\n  }\r\n}\r\n","@import '../../../styles/variables';\r\n@import '../../../styles/ui/window/title-bar';\r\n@import '../../../styles/ui/octicons';\r\n@import '../../../styles/globals';\r\n@import '../../../styles/ui/button';\r\n@import '../../../styles/ui/scroll';\r\n\r\n#desktop-crash-container,\r\n#crash-app {\r\n  height: 100%;\r\n}\r\n\r\n#crash-app {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\npre.error {\r\n  flex-shrink: 1;\r\n  flex-grow: 1;\r\n\r\n  word-wrap: break-word;\r\n  white-space: pre-wrap;\r\n  font-family: var(--font-family-monospace);\r\n  background: rgba($blue-100, 0.3);\r\n  color: $gray-900;\r\n  padding: var(--spacing);\r\n  border-radius: var(--border-radius);\r\n\r\n  user-select: text;\r\n  cursor: text;\r\n\r\n  overflow: auto;\r\n\r\n  margin: 0 0 var(--spacing-double) 0;\r\n}\r\n\r\nheader {\r\n  margin-bottom: var(--spacing-double);\r\n  display: flex;\r\n  flex: none;\r\n  align-items: center;\r\n\r\n  h1 {\r\n    margin: 0;\r\n    font-weight: var(--font-weight-semibold);\r\n  }\r\n\r\n  .octicon.error-icon {\r\n    flex: none;\r\n    color: $red-700;\r\n    height: 32px;\r\n    margin-right: var(--spacing);\r\n    // In case the title wraps we should render the icon up top\r\n    align-self: flex-start;\r\n    // Add a little margin so it looks like it's centered if\r\n    // the title doesn't wrap\r\n    margin-top: 3px;\r\n  }\r\n}\r\n\r\np {\r\n  margin: 0 0 var(--spacing-double) 0;\r\n  max-width: 500px;\r\n  flex-shrink: 0;\r\n}\r\n\r\nmain {\r\n  margin: var(--spacing-quad);\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-grow: 1;\r\n  min-height: 0;\r\n\r\n  .footer {\r\n    flex: none;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: flex-end;\r\n\r\n    button {\r\n      min-width: 150px;\r\n    }\r\n  }\r\n}\r\n\r\n.background-graphic-bottom {\r\n  position: absolute;\r\n  right: var(--spacing);\r\n  bottom: var(--spacing);\r\n\r\n  height: 45%;\r\n  // I hate this but we'll have to live with it for beta.\r\n  z-index: -1;\r\n}\r\n\r\n.background-graphic-top {\r\n  position: absolute;\r\n  right: 80px;\r\n  top: 40px;\r\n\r\n  height: 20%;\r\n  // I hate this but we'll have to live with it for beta.\r\n  z-index: -1;\r\n}\r\n","//\n//\n// -------- Grays --------\n$gray-000:        #fafbfc !default;\n$gray-100:        #f6f8fa !default;\n$gray-200:        #e1e4e8 !default;\n$gray-300:        #d1d5da !default;\n$gray-400:        #959da5 !default;\n$gray-500:        #6a737d !default;\n$gray-600:        #586069 !default;\n$gray-700:        #444d56 !default;\n$gray-800:        #2f363d !default;\n$gray-900:        #24292e !default; // body font color\n\n// -------- Blue --------\n$blue-000:        #f1f8ff !default;\n$blue-100:        #dbedff !default;\n$blue-200:        #c8e1ff !default;\n$blue-300:        #79b8ff !default;\n$blue-400:        #2188ff !default;\n$blue-500:        #0366d6 !default; // Default: Passes AA with #fff\n$blue-600:        #005cc5 !default;\n$blue-700:        #044289 !default;\n$blue-800:        #032f62 !default;\n$blue-900:        #05264c !default; // Passes with 1/2/300 blues\n\n// -------- Green --------\n$green-000:       #f0fff4 !default;\n$green-100:       #dcffe4 !default;\n$green-200:       #bef5cb !default;\n$green-300:       #85e89d !default;\n$green-400:       #34d058 !default;\n$green-500:       #28a745 !default; // Default. passes AA Large\n$green-600:       #22863a !default; // Text green, passes AA on #fff\n$green-700:       #176f2c !default;\n$green-800:       #165c26 !default;\n$green-900:       #144620 !default;\n\n// -------- Yellow --------\n$yellow-000:      #fffdef !default;\n$yellow-100:      #fffbdd !default;\n$yellow-200:      #fff5b1 !default;\n$yellow-300:      #ffea7f !default;\n$yellow-400:      #ffdf5d !default;\n$yellow-500:      #ffd33d !default;\n$yellow-600:      #f9c513 !default;\n$yellow-700:      #dbab09 !default;\n$yellow-800:      #b08800 !default;\n$yellow-900:      #735c0f !default;\n\n// -------- Orange --------\n$orange-000:      #fff8f2 !default;\n$orange-100:      #ffebda !default;\n$orange-200:      #ffd1ac !default;\n$orange-300:      #ffab70 !default;\n$orange-400:      #fb8532 !default;\n$orange-500:      #f66a0a !default; // Default. passes AA Large with #fff\n$orange-600:      #e36209 !default;\n$orange-700:      #d15704 !default;\n$orange-800:      #c24e00 !default;\n$orange-900:      #a04100 !default;\n\n// -------- Red --------\n$red-000:         #ffeef0 !default;\n$red-100:         #ffdce0 !default;\n$red-200:         #fdaeb7 !default;\n$red-300:         #f97583 !default;\n$red-400:         #ea4a5a !default;\n$red-500:         #d73a49 !default; // Default. passes AA\n$red-600:         #cb2431 !default;\n$red-700:         #b31d28 !default;\n$red-800:         #9e1c23 !default;\n$red-900:         #86181d !default;\n\n// -------- Purple --------\n$purple-000:      #f5f0ff !default;\n$purple-100:      #e6dcfd !default;\n$purple-200:      #d1bcf9 !default;\n$purple-300:      #b392f0 !default;\n$purple-400:      #8a63d2 !default;\n$purple-500:      #6f42c1 !default; // passes AA with #fff\n$purple-600:      #5a32a3 !default;\n$purple-700:      #4c2889 !default;\n$purple-800:      #3a1d6e !default;\n$purple-900:      #29134e !default;\n\n// -------- Fades --------\n// Black based on same hue as $gray-900\n$black: #1b1f23 !default;\n$white: #fff !default;\n\n$black-fade-15:      rgba($black, 0.15) !default;\n$black-fade-30:      rgba($black, 0.3) !default;\n$black-fade-50:      rgba($black, 0.5) !default;\n$black-fade-70:      rgba($black, 0.7) !default;\n$black-fade-85:      rgba($black, 0.85) !default;\n\n$white-fade-15:      rgba($white, 0.15) !default;\n$white-fade-30:      rgba($white, 0.3) !default;\n$white-fade-50:      rgba($white, 0.5) !default;\n$white-fade-70:      rgba($white, 0.7) !default;\n$white-fade-85:      rgba($white, 0.85) !default;\n\n// -------- Color defaults --------\n$red:         $red-500 !default;\n$purple:      $purple-500 !default;\n$blue:        $blue-500 !default;\n$green:       $green-500 !default;\n$yellow:      $yellow-500 !default;\n$orange:      $orange-500 !default;\n\n$gray-dark:   $gray-900 !default;\n$gray-light:  $gray-400 !default;\n$gray:        $gray-500 !default;\n"],"names":[],"ignoreList":[],"sourceRoot":""}