/* Fonts
*****************************************************************/
$main-font-family: 'Open Sans', Arial, sans-serif;
$primary-font-size: 15px;
$primary-line-height: 18px;
$secondary-font-size: 13px;
$secondary-line-height: 15px;

// new variables begin
// font size
$font-size-main: 14px;
$font-size-medium: 12px;
$font-size-h1a: 32px;
$font-size-h1: 22px;
$font-size-h2: 20px;
$font-size-h3: 16px;
$font-size-h4: 14px;
$font-size-h5: 14px;
$font-size-h6: 12px;
$font-size-small: 12px;
$font-size-extra-small: 10px;
$font-size-button: 16px;

// line height
$font-line-height-main: 18px;
$font-line-height-medium: 17px;
$font-line-height-h1a: 26px;
$font-line-height-h1: 28px;
$font-line-height-h2: 26px;
$font-line-height-h3: 22px;
$font-line-height-h4: 18px;
$font-line-height-h5: 18px;
$font-line-height-h6: 18px;
$font-line-height-small: 18px;

$font-max-width-h5: 480px;
$font-max-width-h6: 400px;
$font-max-width-p: 500px;
// new variables end

/* Palette
*****************************************************************/
$blue-primary: #1f5ea9;
$blue-secondary: #49aaff;
$yellow: #f6ba10;
$blue-transparent: #b6ddff;
$yellow-transparent: rgba($yellow, 0.4);
$yellow-transparent-hex: #fae29e;
$red: #fd4747;
$red-transparent: #ffdada;
$white: #ffffff;
$black: #000000;
$gray-bg1: #f8f8f8;
$gray-bg2: #eeeeee;
$gray-stroke: #cccccc;
$gray-inactive-text: #aaaaaa;
$gray-legal-text: #999999;
$gray-primary-text: #666666;
$gray-titles: #333333;
$gray-bold-text: #afafaf;

$primary-color: $blue-primary;
$primary-color-lighter: $blue-secondary;
$primary-color-darker: darken($blue-secondary, 20%);
$secondary-color-lighter: rgba($blue-secondary, 0.1);
$action-color: $blue-secondary;
$action-color-contrast-dark: rgba(#000, 0.1);
$action-color-transparent: $blue-transparent;
$secondary-action-color: $primary-color;
$disabled-color: $gray-stroke;
$disabled-color-darker: $gray-legal-text;
$neutral-color: #dadada;
$border-color: $gray-stroke;
$border-color-light: $gray-bg2;
$border-dark-primary-color: #104079;
$inactive-star: $gray-inactive-text;
$gray-social-icon: $gray-inactive-text;
$alert-color: $yellow;
$alert-background: $yellow-transparent;
$error-color: $red;
$callout-blue: $blue-secondary;
$restaurant-color: #f48933;
$alcohol-color: #6c4995;
$groceries-color: #96c748;
$laundry-color: #68c6c4;
$delivery-points-color: $yellow;
$search-results-item-hover-color: $secondary-color-lighter; // #ecf6ff
$search-results-item-hover-color-hex: #ecf6ff; // #ecf6ff
$inactive-icon: #dddddd;
$selected-icon: #aaaaaa;
$paypal-primary-color: #012f87;
$paypal-secondary-color: #009ee0;
$share-link-hidden-color: $blue-secondary;
$powered-by: $gray-bold-text;
$rating-star-color: $yellow;

/* Text
*****************************************************************/
$primary-text-color: $gray-titles;
$primary-text-color-contrast: $white;
$secondary-text-color: $gray-primary-text;
$inactive-text-color: $gray-stroke;
$active-text-color: $blue-primary;
$lighter-active-text-color: $blue-secondary;
$legal-text-color: $gray-legal-text;
$link-color: $primary-color;
$error-msg-font: $gray-titles; //contrast to pass ADA
$map-text-color: $gray-inactive-text;

/* Background
*****************************************************************/
$site-background: $gray-bg2;
$site-background-new-seo: $white;
$modal-page-background: $gray-bg1;
$module-background: $gray-bg1;
$module-background-contrast: $white;
$disabled-input-background: $gray-bg1;
$flyout-menu-suboptions-background: $gray-bg1;
$flyout-menu-footer-background: $gray-bg1;
$available-promos-dropdown-background: $gray-bg1;
$enabled-input-background: $white;
$available-promo-card-background: $white;
$dark-overlay: rgba($gray-titles, 0.2);
$error-msg-background: $red-transparent;
$ios-background-color: #f5f5f5;
$promo-banner-background: $gray-inactive-text;
$promo-floating-pill-background: $primary-color-lighter;

/* Layout
*****************************************************************/
// !!! don't use this
$gutter-width: 10px;

// use these
$gutter-extra-small: 2px;
$gutter-small: 5px;
$gutter: 10px;
$gutter-large: 20px;
$gutter-extra-large: 40px;
$gutter-xxl: 80px;
$rounded-corners: 3px;

$site-width-mobile: 320px;
$site-width-mobile-new: 360px; //Iphone 6 and new androids
$site-width-mobile-medium: 410px; //Iphone 6+ or Pixel
$site-width-mobile-large: 568px; //iphone 5 in landscape
$site-width-small-portrait: 768px; // tablets in portrait and 7 inch class tablets
$site-width-small: 960px; // tablets and older laptops
$site-width-medium: 1200px;
$site-width-large: 1500px;

$depth-overlay: 2000;

/* Margins
******************************************************************************/
$margin-modal-login: 40px 40px 20px 40px;
$margin-modal-mid: 20px 40px;
$margin-modal-login-small: 20px 20px 10px 20px;
$margin-modal-info: 40px 20px 20px 20px;
$margin-modal-info-small: 20px 10px 10px 10px;
$margin-modal-item: 40px 20px 0px;
$margin-image-header: 40px 0px 20px;
$margin-module-new: 40px 20px;
$margin-title: 0px;
$margin-subtitle: 10px 0px;
$margin-item-block: 10px 0px;
$margin-cta: 0px 20px;


$border-radius-width: 3px;
$header-height: 54px;

/* Mixins
*****************************************************************/
@mixin display-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

@mixin flex-direction($direction: row) {
    @if $direction == row-reverse {
        -webkit-box-direction: reverse;
        -webkit-box-orient: horizontal;
    } @else if $direction == column {
        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
    } @else if $direction == column-reverse {
        -webkit-box-direction: reverse;
        -webkit-box-orient: vertical;
    } @else {
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
    }
    -webkit-flex-direction: $direction;
    -ms-flex-direction: $direction;
    flex-direction: $direction;
}

@mixin flex($grow: 1, $shrink: 1, $basis: auto) {
    -webkit-box-flex: $grow;
    -webkit-flex: $grow $shrink $basis;
    -ms-flex: $grow $shrink $basis;
    flex: $grow $shrink $basis;
}

@mixin triangle($direction: 'down', $size: 20px, $color: #000) {
    width: 0;
    height: 0;
    border-left: $size solid #{setTriangleColor($direction, 'left', $color)};
    border-right: $size solid #{setTriangleColor($direction, 'right', $color)};
    border-bottom: $size solid #{setTriangleColor($direction, 'bottom', $color)};
    border-top: $size solid #{setTriangleColor($direction, 'top', $color)};
}

// Responsive breakpoints
@mixin iphone5 {
    @media (max-width: #{$site-width-mobile}) {
        @content;
    }
}

@mixin iphone6 {
    @media (max-width: #{$site-width-mobile-new}) {
        @content;
    }
}

@mixin iphone6-up {
    @media (min-width: #{$site-width-mobile-new}) {
        @content;
    }
}

@mixin small-phones {
    @media (max-width: #{$site-width-mobile-medium}) {
        @content;
    }
}

@mixin large-phones-up {
    @media (min-width: #{$site-width-mobile-medium}) {
        @content;
    }
}

@mixin tablet-small-up {
    @media (min-width: #{$site-width-mobile-large}) {
        @content;
    }
}

@mixin mobile-only {
    @media (max-width: #{$site-width-small-portrait - 1px}) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: #{$site-width-small-portrait}) {
        @content;
    }
}

@mixin tablet-only {
    @media (min-width: #{$site-width-small-portrait}) and (max-width: #{$site-width-small - 1px}) {
        @content;
    }
}

@mixin mobile-and-tablet {
    @media (max-width: #{$site-width-small - 1}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$site-width-small}) {
        @content;
    }
}

//Utility function to return the relevant colour depending on what type of arrow it is
@function setTriangleColor($direction, $side, $color) {
    @if $direction == 'left' and $side == 'right' or $direction == 'right' and $side == 'left' or $direction == 'down' and $side == 'top' or $direction == 'up' and $side == 'bottom' {
        @return $color;
    } @else {
        @return 'transparent';
    }
}

// Mixin for GroupOrderInfoBanner
@mixin setGroupOrderBanner {
    padding: $gutter-small 0;
    flex: 0 0 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row-reverse nowrap;
    @include tablet {
        flex: 0 0 380px;
    }
    @include desktop {
        flex: 0 0 420px; // blazeit
    }
}

@mixin pseudoElementOverlay($position, $height) {
    content: "";
    position: $position;
    width: 100%;
    height: $height;
    background-color: rgba(0, 0, 0, 0.5);
}

@mixin inputPaddingRadius {
	border-radius: 3px;
	padding: 6px 8px 6px 30px;
}