@use 'sass:map';

// Variables
// Add global variables here, color palette, those variables shared by components all applied to global styling

// ====================================================================
// Breakpoints
// Window breakpoints
// ====================================================================
$breakpoint-mobile: 375;
$breakpoint-tablet: 900;
$breakpoint-desktop: 1440;

// ====================================================================
// Design width
// Used to keep px() proportional to designs
// ====================================================================
$design-width-mobile: 375;
$design-width-tablet: 900;
$design-width-desktop: 1440;

// ====================================================================
// Base palette
// Grayscale and brand colors for use across the site.
// ====================================================================
$white: #fff;
$black: #000;

// ====================================================================
// General
// Global color variables, used usually in sections
// Global variables used across the web app
// ====================================================================
$page-bg-color: $white;
$element-shadow: 0 16px 16px 0 rgb(0 0 0 / 4%);

// ====================================================================
// Nav bar
// ====================================================================
$navbar-height-mobile: px(60);
$navbar-height-desktop: px(80);

// ====================================================================
// Standard Eases
// ====================================================================
$ease-sine-in: cubic-bezier(0.12, 0, 0.39, 0);
$ease-sine-out: cubic-bezier(0.61, 1, 0.88, 1);
$ease-sine-in-out: cubic-bezier(0.37, 0, 0.63, 1);
$ease-power1-in: cubic-bezier(0.426, -0.015, 0.75, 0.529);
$ease-power1-out: cubic-bezier(0.356, 0.716, 0.693, 0.99);
$ease-power1-in-out: cubic-bezier(0.459, 0.013, 0.536, 0.973);
$ease-power2-in: cubic-bezier(0.32, 0, 0.67, 0);
$ease-power2-out: cubic-bezier(0.33, 1, 0.68, 1);
$ease-power2-in-out: cubic-bezier(0.65, 0, 0.35, 1);
$ease-power3-in: cubic-bezier(0.5, 0, 0.75, 0);
$ease-power3-out: cubic-bezier(0.25, 1, 0.5, 1);
$ease-power3-in-out: cubic-bezier(0.76, 0, 0.24, 1);
$ease-power4-in: cubic-bezier(0.64, 0, 0.78, 0);
$ease-power4-out: cubic-bezier(0.22, 1, 0.36, 1);
$ease-power4-in-out: cubic-bezier(0.83, 0, 0.17, 1);
$ease-expo-in: cubic-bezier(0.7, 0, 0.84, 0);
$ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
$ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
$ease-circ-in: cubic-bezier(0.55, 0, 1, 0.45);
$ease-circ-out: cubic-bezier(0, 0.55, 0.45, 1);
$ease-circ-in-out: cubic-bezier(0.85, 0, 0.15, 1);
$ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);
$ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
$ease-back-in-out: cubic-bezier(0.68, -0.4, 0.32, 1.4);

// ====================================================================
// Favourite Eases
// ====================================================================
$ease-vinnie-in-out: cubic-bezier(0.2, 0, 0, 1);
$ease-joris-special-in: cubic-bezier(0.689, 0, 0.837, 0.167);
$ease-joris-special-out: cubic-bezier(0.343, 1, 0.333, 1);
$ease-joris-special-in-out: cubic-bezier(0.402, -0.004, 0.179, 1.113);
$ease-joris-out: cubic-bezier(0.169, 0.846, 0.066, 1);
$ease-joris-in-out: cubic-bezier(0.298, 0.002, 0.236, 1);
$ease-smooth-in-soft-landing: cubic-bezier(0.35, -0.015, -0.15, 1.15);
$ease-soft-ease-in: cubic-bezier(0.803, 0.023, 0.806, 1.012);
$ease-slow-start: cubic-bezier(1.1, -0.1, 0.56, 0.9);
$ease-soft-elastic: cubic-bezier(0.216, 1.243, 0.041, 1.087);

// ====================================================================
// Custom Eases
// ====================================================================
$ease1: cubic-bezier(0.32, 0.83, 0.6, 1);
$ease2: cubic-bezier(0.32, 0.94, 0.6, 1);
$ease3: cubic-bezier(0.26, 1, 0.48, 1);
$ease4: cubic-bezier(0.17, 0.89, 0.32, 1.27);
$ease5: cubic-bezier(0.9, 0, 0.1, 1);
$ease6: cubic-bezier(0.54, 0, 1, 0.44);
$ease7: cubic-bezier(0.66, 0, 0.34, 1);
$ease8: cubic-bezier(0.64, 0, 0.78, 0);
