// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "color-aliases";
@import "mixins";

// ----------------------------------------------------------------------------
// This file is part of the public Sass API of @blueprintjs/core.
// As such, it comes with important considerations:
//
// -  Changes to these variable names and values are generally considered breaking changes.
// -  A limited subset of Sass syntax is supported. All syntax inluded here must be able to get parsed by the
//    `generate-css-variables` script in @blueprintjs/node-build-scripts. For example, "sass:math" is unsupported.
// ----------------------------------------------------------------------------

// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
// N.B. No quotes around this string value, for Less syntax compatibility. Also, this cannot be overriden
// (the JS components have this class prefix hard-coded), so it does not have the `!default` modifier.
$ns: bp6;
// Alias for BP users outside this repo
$bp-ns: $ns;

// Legacy 10px-based grid size variable, kept for backward compatibility.
// New spacing values should use $pt-spacing instead (multiply by 2.5 to convert).
// This variable will eventually be deprecated in favor of the 4px-based system.
$pt-grid-size: 10px !default;

// Primary spacing unit for Blueprint's 4px-based spacing system.
// This is the most important spacing variable, so it comes up early
// (so other variables can use it to define themselves).
// This replaces $pt-grid-size as the foundation for consistent spacing throughout components.
// Use multiples of this value for all margins, padding, and sizing calculations.
$pt-spacing: 4px !default;

// Icon variables

$icons16-family: "blueprint-icons-16" !default;
$icons20-family: "blueprint-icons-20" !default;

$pt-icon-size-standard: $pt-spacing * 4 !default;
$pt-icon-size-large: $pt-spacing * 5 !default;

// Typography

// see https://bitsofco.de/the-new-system-font-stack/
$pt-font-family:
  -apple-system,
  "BlinkMacSystemFont",
  "Segoe UI",
  "Roboto",
  "Oxygen",
  "Ubuntu",
  "Cantarell",
  "Open Sans",
  "Helvetica Neue",
  $icons16-family,
  // support inline Blueprint icons
  sans-serif !default;

$pt-font-family-monospace: monospace !default;

$pt-font-size: $pt-spacing * 3.5 !default;
$pt-font-size-large: $pt-spacing * 4 !default;
$pt-font-size-small: $pt-spacing * 3 !default;

// a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px)
// equivalent to: math.div($pt-spacing * 4.5, $pt-font-size) + 0.0001
$pt-line-height: 1.28581 !default;

// Grids & dimensions

// equivalent to: $pt-spacing
$pt-border-radius: 4px !default;

// Buttons
$pt-button-height: $pt-spacing * 7.5 !default;
$pt-button-height-small: $pt-spacing * 6 !default;
$pt-button-height-smaller: $pt-spacing * 5 !default;
$pt-button-height-large: $pt-spacing * 10 !default;

// Inputs
$pt-input-height: $pt-spacing * 7.5 !default;
$pt-input-height-large: $pt-spacing * 10 !default;
$pt-input-height-small: $pt-spacing * 6 !default;

// Others
$pt-navbar-height: $pt-spacing * 12.5 !default;

// Z-indices
$pt-z-index-base: 0 !default;
$pt-z-index-content: $pt-z-index-base + 10 !default;
$pt-z-index-overlay: $pt-z-index-content + 10 !default;
$pt-z-index-dialog-header: $pt-z-index-overlay + 10 !default;

// Shadow opacities
$pt-border-shadow-opacity: 0.1 !default;
$pt-drop-shadow-opacity: 0.2 !default;
$pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default;
$pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default;

// Elevations
$pt-elevation-shadow-0:
  0 0 0 1px rgba($black, 15%),
  0 0 5px 0 rgba(0, 0, 0, 2%) !default;
$pt-elevation-shadow-1:
  0 0 0 1px rgba($black, 10%),
  0 1px 3px 0 rgba(0, 0, 0, 10%),
  0 1px 2px -1px rgba(0, 0, 0, 10%) !default;
$pt-elevation-shadow-2:
  0 0 0 1px rgba($black, 10%),
  0 4px 6px -4px rgba(0, 0, 0, 10%),
  0 10px 15px -3px rgba(0, 0, 0, 10%) !default;
$pt-elevation-shadow-3:
  0 0 0 1px rgba($black, 10%),
  0 20px 25px -5px rgba(0, 0, 0, 10%),
  0 10px 15px -3px rgba(0, 0, 0, 10%) !default;
$pt-elevation-shadow-4:
  0 0 0 1px rgba($black, 10%),
  0 25px 50px -12px rgba(0, 0, 0, 30%) !default;

$pt-dark-elevation-shadow-0:
  inset 0 0 0 1px rgba($white, 20%),
  0 0 10px 0 rgba(0, 0, 0, 20%) !default;
$pt-dark-elevation-shadow-1:
  inset 0 0 0 1px rgba($white, 20%),
  0 1px 10px 0 rgba(0, 0, 0, 20%),
  inset 0 0 0.5px 0 rgba($white, 30%),
  inset 0 0.5px 0 0 rgba($white, 8%),
  0 1px 10px -1px rgba(0, 0, 0, 20%) !default;
$pt-dark-elevation-shadow-2:
  inset 0 0 0 1px rgba($white, 20%),
  0 4px 6px -4px rgba(0, 0, 0, 50%),
  inset 0 0 0.5px 0 rgba($white, 30%),
  inset 0 0.5px 0 0 rgba($white, 8%),
  0 10px 30px -5px rgba(0, 0, 0, 50%) !default;
$pt-dark-elevation-shadow-3:
  inset 0 0 0 1px rgba($white, 20%),
  0 20px 25px -5px rgba(0, 0, 0, 30%),
  inset 0 0 0.5px 0 rgba($white, 30%),
  inset 0 0.5px 0 0 rgba($white, 8%),
  0 10px 30px -5px rgba(0, 0, 0, 30%) !default;
$pt-dark-elevation-shadow-4:
  inset 0 0 0 1px rgba($white, 20%),
  0 25px 60px -12px rgba(0, 0, 0, 85%),
  inset 0 0 0.5px 0 rgba($white, 30%),
  inset 0 0.5px 0 0 rgba($white, 8%) !default;

// Transitions
$pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
$pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
$pt-transition-duration: 100ms !default;

// Light theme styles

$pt-input-box-shadow:
  inset 0 0 0 1px rgba($black, 0.2),
  inset 0 1px 1px rgba($black, 0.3) !default;

$pt-dialog-box-shadow: $pt-elevation-shadow-3 !default;
$pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
$pt-tooltip-box-shadow: $pt-popover-box-shadow !default;
// Equivalent to $pt-dark-elevation-shadow-3, but swaps the outset border for an inset one
$pt-toast-box-shadow:
  inset border-shadow(0.2),
  0 2px 4px rgba($black, $pt-drop-shadow-opacity),
  0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;

// Dark theme styles

$pt-dark-input-box-shadow:
  inset 0 0 0 1px rgba($white, 0.2),
  inset 0 -1px 1px 0 rgba($white, 0.3) !default;
$pt-dark-input-intent-box-shadow-colors: (
  "primary": $blue4,
  "success": $green4,
  "warning": $orange4,
  "danger": $red4,
) !default;

$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-3 !default;
// Dark popover borders are outset, so they can't use rgba($white, 0.3).
// They also can't use $gray1 because its blue tint is noticeably different from other white borders in dark theme.
// Instead, we create a new color tuned to match semi-transparent white borders on a dark theme background.
$pt-dark-popover-border-color: hsl(215deg, 3%, 38%) !default;
$pt-dark-popover-box-shadow:
  0 0 0 1px $pt-dark-popover-border-color,
  $pt-dark-elevation-shadow-3 !default;
// Equivalent to $pt-dark-elevation-shadow-3 without the inset border
$pt-dark-tooltip-box-shadow:
  0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
  0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-toast-box-shadow: $pt-dark-elevation-shadow-3 !default;

// Colors used for Windows high contrast mode
// Because high contrast mode doesn't actually obey any colors we define, but uses system colors,
// we define these variables in terms of System colors so that it's easier to understand the intent.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/system_color_keywords for more info on system colors.
$pt-high-contrast-mode-border-color: buttonborder;
$pt-high-contrast-mode-active-background-color: highlight;
$pt-high-contrast-mode-active-text-color: highlight;
$pt-high-contrast-mode-disabled-border-color: graytext;
$pt-high-contrast-mode-disabled-text-color: graytext;
$pt-high-contrast-mode-disabled-background-color: graytext;