// 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: bp4;
// Alias for BP users outside this repo
$bp-ns: $ns;

// easily the most important variable, so it comes up top
// (so other variables can use it to define themselves)
$pt-grid-size: 10px !default;

// Icon variables

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

$pt-icon-size-standard: 16px !default;
$pt-icon-size-large: 20px !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-grid-size * 1.4 !default;
$pt-font-size-large: $pt-grid-size * 1.6 !default;
$pt-font-size-small: $pt-grid-size * 1.2 !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-grid-size * 1.8, $pt-font-size) + 0.0001
$pt-line-height: 1.28581 !default;

// Grids & dimensions

// equivalent to: floor(math.div($pt-grid-size, 5))
$pt-border-radius: 2px !default;

// Buttons
$pt-button-height: $pt-grid-size * 3 !default;
$pt-button-height-small: $pt-grid-size * 2.4 !default;
$pt-button-height-smaller: $pt-grid-size * 2 !default;
$pt-button-height-large: $pt-grid-size * 4 !default;

// Inputs
$pt-input-height: $pt-grid-size * 3 !default;
$pt-input-height-large: $pt-grid-size * 4 !default;
$pt-input-height-small: $pt-grid-size * 2.4 !default;

// Others
$pt-navbar-height: $pt-grid-size * 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 $pt-divider-black !default;
$pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity),
                        0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity),
                        0 1px 1px rgba($black, $pt-drop-shadow-opacity),
                        0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-elevation-shadow-3: border-shadow($pt-border-shadow-opacity),
                        0 2px 4px rgba($black, $pt-drop-shadow-opacity),
                        0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default;
$pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity),
                        0 4px 8px rgba($black, $pt-drop-shadow-opacity),
                        0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default;

$pt-dark-elevation-shadow-0: inset 0 0 0 1px rgba($white, 0.2) !default;
$pt-dark-elevation-shadow-1: inset 0 0 0 1px rgba($white, 0.2),
                             0 1px 1px 0 rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-elevation-shadow-2: inset 0 0 0 1px rgba($white, 0.2),
                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity),
                             0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-elevation-shadow-3: inset 0 0 0 1px rgba($white, 0.2),
                             0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity),
                             0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-elevation-shadow-4: inset 0 0 0 1px rgba($white, 0.2),
                             0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity),
                             0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !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.5) !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 $gray3 !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;
