// RESPONSIVE
// These are determined largely by the content being displayed NOT the device displaying the content.
// This allows for the most optimal presentation regardless of the device.

// 	Raw Break Points
// 	The breakpoints encompass:
// 	Steps (1, 2, etc.) -- Account for large structural view reflows that may need to occur (Ascending in px)
// 	Sub-Steps (1-1, 2-1, etc.) -- Account for fine styling adjustments between steps (Descending in px)

// 	STEP 1
// 	Smallest layout @ < 600px
//		Step
@step-1: 600px;
//		Rules
@breakpoint-1: ~"all and (max-width: @{step-1})";

//	STEP 2
// 	Medium layout @ > 600px && <= 1200px
//		Steps
@step-1-1: 1319px;
@step-2: 1200px;
//		Sub-Steps
@step-2-0: 1152px;
@step-2-1: 1050px;
@step-2-15: 965px;
@step-2-2: 1090px; // Mobile tipping point
@step-2-25: 950px; // Top bar changes
@step-2-3: 450px;

@step-3: 575px; // Decreased Height
@step-3-4: 375px; // iphone X landscape height
@step-4: 320px; // extra small mobile: iPhone 5/se

//		Rules
@breakpoint-1-0: ~"all and (min-width: @{step-1}) and (max-width: @{step-1-1})";
@breakpoint-2: ~"all and (min-width: @{step-1}) and (max-width: @{step-2})";
@breakpoint-2-0: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-0})";
@breakpoint-2-1: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-1})";
@breakpoint-2-15: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-15})";
@breakpoint-2-2: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-2})"; // Mobile tipping point
@breakpoint-2-25: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-25})"; // Top bar changes
@breakpoint-2-3: ~"all and (min-width: @{step-1}) and (max-width: @{step-2-3})";
@breakpoint-3: ~"all and (min-height: @{step-1}) and (max-height: @{step-3})";

//	STEP 3
// 	Full layout @ > 1200px
//		Step
//			Explicit declaration of step not necessary here
//		Rules
@breakpoint-3: ~"all and (min-width: @{step-2})";

// Helper Breakpoints
// Smallish desktop (up to step 2-0)
@breakpoint-smallish-desktop: ~"all and (max-width: @{step-2-0})";
// Small desktop (up to step 2-1)
@breakpoint-small-desktop: ~"all and (max-width: @{step-2-1})";
// Very small desktop (up to step 2-15)
@breakpoint-smaller-desktop: ~"all and (max-width: @{step-2-15})";
//	Mobile (up to step-2-2)
@breakpoint-mobile: ~"all and (max-width: @{step-2-2})"; // 900
// Mobile (up to step-2-25)
@breakpoint-mobile-mid: ~"all and (max-width: @{step-2-25})"; // 850
// Mobile (up to step-1)
@breakpoint-mobile-medium: ~"all and (max-width: @{step-1})"; // 600
//	Mobile (up to step-2-2)
@breakpoint-mobile-small: ~"all and (max-width: @{step-2-3})"; // 450
// Mobile (up to step-4)
@breakpoint-mobile-extra-small: ~"all and (max-width: @{step-4})"; // 320
// Mobile (up-to-step-3)
@breakpoint-mobile-small-height: ~"all and (max-height: @{step-3})";
// Mobile (between step 3 and 4) iphoneX landscape
@breakpoint-mobile-smaller-height: ~"all and (max-height: @{step-3-4})";
// Mobile (up-to-step-4)
@breakpoint-mobile-extra-small-height: ~"all and (max-height: @{step-4})";