@charset "utf-8"; // foreign characters ahead (in KSS markup)

// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "common/variables";
@import "common/mixins";
@import "common/icons";

hr {
  margin: ($pt-grid-size * 2) 0;
  border: none;
  border-bottom: 1px solid $pt-divider-black;

  .pt-dark & {
    border-color: $pt-dark-divider-white;
  }
}

// consistent cross-browser text selection
::selection {
  background: $pt-text-selection-color;
}

body {
  @include base-typography();
  color: $pt-text-color;
}

small {
  font-size: $pt-font-size-small;
}

/*
Fonts

Markup:
<div class="{{.modifier}}">Blueprint components react overlay date picker.</div>

.pt-monospace-text - Use a monospace font (ideal for code)

Styleguide fonts
*/

.pt-monospace-text {
  @include monospace-typography();
}

/*
Headings

Markup:
<h1>H1 heading</h1>
<h2>H2 heading</h2>
<h3>H3 heading</h3>
<h4>H4 heading</h4>
<h5>H5 heading</h5>
<h6>H6 heading</h6>

Styleguide headings
*/

$headers: (
  "h1": (40px, 0.8em),
  "h2": (27px, 0.8em),
  "h3": (24px, 0.8em),
  "h4": (20px, 0.9em),
  "h5": (17px, 0.9em),
  "h6": (15px, 0.9em)
);

@each $header, $props in $headers {
  #{$header} {
    @include header-typography();
    margin: 0 0 $pt-grid-size;
    padding: 0;
    line-height: nth($props, 2);
    font-size: nth($props, 1);
  }
}

/*
UI text

Markup:
<div class="{{.modifier}}">Blueprint components react overlay date picker.</div>

.pt-ui-text - Default UI text. This is applied to the document body as part of core styles.
.pt-ui-text-large - Larger UI text.

Styleguide pt-ui-text
*/

.pt-ui-text {
  @include base-typography();
}

.pt-ui-text-large {
  line-height: 1.25;
  font-size: $pt-font-size-large;
}

/*
Running text

Markup:
<div class="{{.modifier}}">
  <p>Longform text, such as rendered Markdown documents, benefit from additional spacing and slightly
large font size. Apply <code>.pt-running-text</code> to the parent element to adjust spacing for the following
elements:</p>
  <ul>
    <li><code>&lt;p></code> tags have increased line-height and font size.</li>
    <li><code>&lt;h*></code> tag margins are adjusted to provide clear separation between sections in a document.</li>
    <li><code>&lt;ul></code> and <code>&lt;ol></code> tags receive [`.pt-list`](#typography.lists) styles for legibility.</li>
  </ul>
  <h3>New section</h3>
  <p>And another paragraph.</p>
</div>

.pt-running-text - Apply larger font size and additional spacing.

Styleguide pt-running-text
*/

.pt-running-text {
  @include running-typography();

  @each $header, $props in $headers {
    #{$header} {
      margin-top: $pt-grid-size * 4;
      margin-bottom: $pt-grid-size * 2;
    }
  }
}

.pt-running-text-small {
  @include running-typography-small();
}

p {
  margin: 0 0 $pt-grid-size;
  padding: 0;
}

/*
Links

Simply use an `<a href="">` tag as you normally would. No class is necessary for Blueprint styles.
Links are underlined only when hovered.

Putting an icon inside a link will cause it to inherit the link's text color.

Styleguide typography.links
*/

a {
  text-decoration: none;
  color: $pt-link-color;

  &:hover {
    cursor: pointer;
    text-decoration: underline;
    color: $pt-link-color;
  }

  #{$icon-classes} {
    color: inherit;
  }

  code,
  .pt-dark & code {
    color: inherit;
  }

  .pt-dark &,
  .pt-dark &:hover {
    color: $pt-dark-link-color;

    #{$icon-classes} {
      color: inherit;
    }
  }
}

/*
Preformatted text

Markup:
<code>$ npm install</code>
<pre>
%pt-select {
  @include pt-button();
  @include prefixer(appearance, none, webkit moz);
  border-radius: $pt-border-radius;
  height: $pt-button-height;
  padding: 0 ($input-padding-horizontal * 3) 0 $input-padding-horizontal;
}
</pre>
<pre><code>export function hasModifier(modifiers: ts.ModifiersArray, ...modifierKinds: ts.SyntaxKind[]) {
    if (modifiers == null || modifierKinds == null) {
        return false;
    }
    return modifiers.some((m) => {
        return modifierKinds.some((k) => m.kind === k);
    });
}</code></pre>

Styleguide preformatted
*/

pre,
code {
  @include monospace-typography();
}

code {
  border-radius: $pt-border-radius;
  box-shadow: inset border-shadow(0.2);
  background: $pt-code-background-color;
  padding: 2px 5px;
  color: $pt-code-text-color;

  .pt-dark & {
    box-shadow: inset border-shadow(0.4);
    background: $pt-dark-code-background-color;
    color: $pt-dark-code-text-color;
  }
}

pre {
  display: block;
  margin: $pt-grid-size 0;
  border-radius: $pt-border-radius;
  box-shadow: inset 0 0 0 1px $pt-divider-black;
  background: $pt-code-background-color;
  padding: ($pt-grid-size * 1.3) ($pt-grid-size * 1.5) ($pt-grid-size * 1.2);
  line-height: 1.4;
  color: $pt-text-color;
  font-size: $pt-font-size - 1px;
  word-break: break-all;
  word-wrap: break-word;

  > code {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    white-space: pre-wrap;
    color: inherit;
    font-size: inherit;
  }

  .pt-dark & {
    box-shadow: inset 0 0 0 1px $pt-dark-divider-black;
    background: $pt-dark-code-background-color;
    color: $pt-dark-text-color;

    > code {
      box-shadow: none;
      background: transparent;
    }
  }
}

/*
Block quotes

Markup:
<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
</blockquote>

Styleguide blockquote
*/

blockquote {
  @include running-typography();
  margin: 0 0 $pt-grid-size;
  border-left: solid 4px rgba($gray4, 0.5);
  padding: 0 ($pt-grid-size * 2);

  p:last-child {
    margin-bottom: 0;
  }

  .pt-dark & {
    border-color: rgba($gray2, 0.5);
  }
}

/*
Lists

Markup:
<ul class="{{.modifier}}">
  <li>Item the first</li>
  <li>Item the second</li>
  <li>Item the third</li>
</ul>
<ol class="{{.modifier}}">
  <li>Item the first</li>
  <li>Item the second</li>
  <li>Item the third</li>
</ol>

.pt-list - Add a little spacing between items for readability.
.pt-list-unstyled - Remove all list styling (including indicators) so you can add your own.

Styleguide lists
*/

ol,
ul {
  margin: $pt-grid-size 0;
  padding-left: $pt-grid-size * 4;
}

.pt-list,
.pt-running-text ul,
.pt-running-text ol {
  li:not(:last-child) {
    padding-bottom: $pt-grid-size / 2;
  }

  // remove bottom margin on final element in list item because list items put their own spacing
  li :last-child {
    margin-bottom: 0;
  }

  ol,
  ul {
    margin-top: $pt-grid-size / 2;
  }
}

.pt-list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    padding: 0;
  }
}

/*
Text utilities

Markup:
<div class="{{.modifier}}" style="width: 320px;">
  Blueprint components react overlay date picker. Breadcrumbs dialog progress non-ideal state.
</div>

.pt-text-muted - Changes text color to a gentler gray.
.pt-text-overflow-ellipsis - Truncates a single line of text with an ellipsis if it overflows its
  container.

Styleguide utilities
*/

.pt-text-muted {
  color: $pt-text-color-muted;

  .pt-dark & {
    color: $pt-dark-text-color-muted;
  }
}

.pt-text-overflow-ellipsis {
  @include overflow-ellipsis();
}

/*
Right-to-left text

Markup:
<h4>Arabic:</h4>
<p class="pt-rtl">
  لكل لأداء بمحاولة من. مدينة الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى عجّل مشروط الخاسرة قد.
  من الذود تكبّد بين, و لها واحدة الأراضي. عل الصفحة والروسية يتم, أي للحكومة استعملت شيء. أم وصل زهاء اليا
</p>
<h4>Hebrew:</h4>
<p class="pt-rtl">
  כדי על עזרה יידיש הבהרה, מלא באגים טכניים דת. תנך או ברית ביולי. כתב בה הטבע למנוע, דת כלים פיסיקה החופשית זכר.
  מתן החלל מאמרשיחהצפה ב. הספרות אנציקלופדיה אם זכר, על שימושי שימושיים תאולוגיה עזה
</p>

Styleguide pt-rtl
*/

.pt-rtl {
  text-align: right;
}

.pt-dark {
  color: $pt-dark-text-color;

  @each $header, $props in $headers {
    #{$header} {
      color: $pt-dark-heading-color;
    }
  }
}