@use './_primitivesVariables.scss' as var;
@import './_pxToRem.scss';

$borderRadius: px-to-rem(8);
$borderRadiusCircle: 50%;
$borderRadiusMax: px-to-rem(300);
$borderRadiusMedium: px-to-rem(8);
$borderRadiusSmall: px-to-rem(4);

$transitionDefault: all 0.15s ease;
$transitionSlideIn: slideIn 0.3s forwards;
$transitionSmooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

$boxShadow: 0 0 px-to-rem(30) rgba(var.$color-navy-900, 0.8);
$boxShadowButton: 0 0 px-to-rem(24) rgba(var.$color-navy-900, 0.5);
$boxShadowBottom: 0 px-to-rem(20) px-to-rem(30) rgba(var.$color-navy-900, 0.8);

$modalOverlay: rgba(var.$color-sky-900, 0.8);

$gapSmall: px-to-rem(8);
$gapMedium: px-to-rem(16);
$gapLarge: px-to-rem(24);
$gapXLarge: px-to-rem(32);
$gapXXLarge: px-to-rem(40);

$headerHeight: 70px;

$zIndex-page10: 10;
$zIndex-footer15: 15;
$zIndex-header20: 20;
$zIndex-modal26: 26;
$zIndex-sidebar30: 30;
$zIndex-tooltip40: 40;
$zIndex-modal50: 50;
$zIndex-overlay60: 60;
$zIndex-popMessage70: 70;

// aligned heights used for buttons and inputs (anything that should align with these heights) - they are each 1px less than the actual height to account for Lato font sub-pixel rendering
$alignedHeights-xs: px-to-rem(27);
$alignedHeights-sm: px-to-rem(39);
$alignedHeights-md: px-to-rem(47);
$alignedHeights-lg: px-to-rem(55);
$alignedHeights-xl: px-to-rem(71);

$alignedBorderRadius-xs: px-to-rem(4);
$alignedBorderRadius-sm: px-to-rem(6);
$alignedBorderRadius-md: px-to-rem(8);
$alignedBorderRadius-lg: px-to-rem(10);
$alignedBorderRadius-xl: px-to-rem(12);