@use "sass:math";

@import "colors";

@import '~@blueprintjs/core/src/common/_mixins.scss';

@import '../common/theme';

/*
 * THIS FILE IS A REMAPPING OF THE BLUEPRINT VARIABLES TO OUR STOPLIGHT ONES
 * THIS FILE SHOULD NOT NEED TO UPDATED DIRECTLY
 */

// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
// Do not quote this value, for Less consumers.
$ns: bp3 !default;

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

$pt-font-family: get-font-family(sans);
$pt-font-family-monospace: get-font-family(mono);

$pt-font-size: get-font-size(base);
$pt-font-size-large: get-font-size(lg);
$pt-font-size-small: get-font-size(sm);

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

// Icon variables

$icons16-family: "Icons16" !default;
$icons20-family: "Icons20" !default;

$pt-icon-size-standard: 16px !default;
$pt-icon-size-large: 20px !default;

// Grids & dimensions

$pt-border-radius: get-border-radius(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;

// 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
// all shadow lists must be the same length to avoid flicker in transitions.
$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black,
                        0 0 0 rgba($black, 0),
                        0 0 0 rgba($black, 0) !default;
$pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity),
                        0 0 0 rgba($black, 0),
                        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: 0 0 0 1px $pt-dark-divider-black,
                             0 0 0 rgba($black, 0),
                             0 0 0 rgba($black, 0) !default;
$pt-dark-elevation-shadow-1: border-shadow($pt-dark-border-shadow-opacity),
                             0 0 0 rgba($black, 0),
                             0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default;
$pt-dark-elevation-shadow-2: border-shadow($pt-dark-border-shadow-opacity),
                             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: border-shadow($pt-dark-border-shadow-opacity),
                             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: border-shadow($pt-dark-border-shadow-opacity),
                             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);
$pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11);
$pt-transition-duration: 50ms !default;

// Light theme styles

$pt-input-box-shadow: inset border-shadow(0.15),
                      inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default;

$pt-dialog-box-shadow: $pt-elevation-shadow-4 !default;
$pt-popover-box-shadow: $pt-elevation-shadow-3 !default;
$pt-tooltip-box-shadow: $pt-popover-box-shadow !default;

// Dark theme styles

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

$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default;
$pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default;
$pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default;