// ***** Constant Variables ***** //
$black: #000000;
$white: #FFFFFF;
$dark : #222222;
$gray: #666666;
$light: #EEEEEE;
$light-extra: #f2f2f2;
$space: 26px;

$border: #e7e7e7;
$border-dark: #dedede;

$radius: 3px;
$rounded: 1000px;
$icon-font: 'dashicons';

// ***** Messages Colors ***** //
$notice: #BBBBBB;
$info: #2EA2CC;
$warning: #FFBA00;
$success: #7AD03A;
$error: #DD3D36;

// ***** Links ***** //
$link: #269ad6;
$link-hover: $link;

//
// @functions
//

// RANGES
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
	@if length($range) <= 0 {
		@return 0;
	}
	@return nth($range,1);
}

@function upper-bound($range) {
	@if length($range) < 2 {
		@return 999999999999;
	}
	@return nth($range, 2);
}

// Here we define the lower and upper bounds for each media size
$small-range: (0, 640px);
$medium-range: (641px, 1024px);
$large-range: (1025px, 1920px);

// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;