@import '../../../../bootstrap/less/variables';

//
// Default Variables
// --------------------------------------------------


//== Asset Paths
//
//##

@brand-asset-location: 'https://d17s4kc6349e5h.cloudfront.net/';
@brand-asset-path: '@{brand-asset-location}globals/assets/';
@brand-asset-path-images: '@{brand-asset-path}images/';
@brand-asset-path-fonts: '@{brand-asset-path}fonts/';
@brand-asset-path-icons: '@{brand-asset-path}icons/';

//== Colors
//
//##

@brand-secondary:          spin(@brand-primary, 180);
@brand-header:             #FFFFFF;
@brand-tertiary:           spin(@brand-primary, 90);

//== Scaffolding
//
//##

//** Text color - inverted
@text-color-inverse:       fade(@color-white, 85%);

@link-color-inverse:       lighten(@link-color, 30%);
@link-hover-color-inverse: lighten(@link-color-inverse, 15%);


//== Typography
//
//##

@font-size-tiny:           round(max((@font-size-small * .9), 11px)); // Don't go smaller than 11px!
@line-height-tiny:         1.25;

//** Responsive headings (opt-in)
@font-size-h1-sm:          ceil(@font-size-h1 * 1);
@font-size-h1-md:          ceil(@font-size-h1 * 1);
@font-size-h1-lg:          ceil(@font-size-h1 * 1);

@font-size-h2-sm:          ceil(@font-size-h2 * 1);
@font-size-h2-md:          ceil(@font-size-h2 * 1);
@font-size-h2-lg:          ceil(@font-size-h2 * 1);

@font-size-h3-sm:          ceil(@font-size-h3 * 1);
@font-size-h3-md:          ceil(@font-size-h3 * 1);
@font-size-h3-lg:          ceil(@font-size-h3 * 1);

@font-size-h4-sm:          ceil(@font-size-h4 * 1);
@font-size-h4-md:          ceil(@font-size-h4 * 1);
@font-size-h4-lg:          ceil(@font-size-h4 * 1);

@font-size-h5-sm:          ceil(@font-size-h5 * 1);
@font-size-h5-md:          ceil(@font-size-h5 * 1);
@font-size-h5-lg:          ceil(@font-size-h5 * 1);

@font-size-h6-sm:          ceil(@font-size-h6 * 1);
@font-size-h6-md:          ceil(@font-size-h6 * 1);
@font-size-h6-lg:          ceil(@font-size-h6 * 1);

@line-height-h1:           @headings-line-height;
@line-height-h2:           @headings-line-height;
@line-height-h3:           @headings-line-height;
@line-height-h4:           @headings-line-height;
@line-height-h5:           @headings-line-height;
@line-height-h6:           @headings-line-height;

//** Display headings - inspired by BS v4
@display1-size:            ceil(@font-size-h1 * 1.6);
@display1-size-sm:         ceil(@font-size-h1-sm * 1.7);
@display1-size-md:         ceil(@font-size-h1-md * 1.8);
@display1-size-lg:         ceil(@font-size-h1-lg * 2);

@display2-size:            ceil(@font-size-h1 * 1.4);
@display2-size-sm:         ceil(@font-size-h1-sm * 1.5);
@display2-size-md:         ceil(@font-size-h1-md * 1.6);
@display2-size-lg:         ceil(@font-size-h1-lg * 1.75);

@display3-size:            ceil(@font-size-h1 * 1.25);
@display3-size-sm:         ceil(@font-size-h1-sm * 1.3);
@display3-size-md:         ceil(@font-size-h1-md * 1.4);
@display3-size-lg:         ceil(@font-size-h1-lg * 1.5);

@display4-size:            ceil(@font-size-h1 * 1.1);
@display4-size-sm:         ceil(@font-size-h1-sm * 1.15);
@display4-size-md:         ceil(@font-size-h1-md * 1.2);
@display4-size-lg:         ceil(@font-size-h1-lg * 1.3);

@display1-line-height:     @headings-line-height;
@display2-line-height:     @headings-line-height;
@display3-line-height:     @headings-line-height;
@display4-line-height:     @headings-line-height;

@display1-weight:          300;
@display2-weight:          300;
@display3-weight:          300;
@display4-weight:          300;

@display-small-size:       60%;

@font-weight-lighter: lighter;
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 500;
@font-weight-bolder: bolder;

//** Headings color - inverted
@headings-color-inverse:   @color-white;


//== Spacing scale
//
//##

@spacer-0: 0;
@spacer-1: 2px;
@spacer-2: @padding-small-vertical; // 5px
@spacer-3: @padding-large-vertical; // 10px
@spacer-4: @padding-large-vertical * 2; // 20px
@spacer-5: @padding-large-vertical * 4; // 40px

@display-spacer-1: @padding-large-vertical * 6; // 60px;
@display-spacer-2: @padding-large-vertical * 8; // 80px;
@display-spacer-3: @padding-large-vertical * 10; // 100px;
@display-spacer-4: @padding-large-vertical * 12; // 120px;
@display-spacer-5: @padding-large-vertical * 14; // 140px;


//== Blocks
//
//##

// Note : In future we will be deprecating the use of .block-* in favour of .py-*
// Please see the responsive utilities for spacing
@block-padding-xs:         @padding-base-vertical;
@block-padding-small:      @padding-large-vertical;
@block-padding-medium:     @padding-large-vertical * 2;
@block-padding-large:      @padding-large-vertical * 3;


//== Shadow scale (elevation)
//
//##

@shadow-color: @color-black;

@box-shadow-xs: 0 1px 3px fade(@color-black, 10%), 0 0 1px fade(@color-black, 5%);
@box-shadow-sm: 0 5px 10px fade(@color-black, 15%), 0 0 5px fade(@color-black, 10%);
@box-shadow:    0 10px 20px fade(@color-black, 20%), 0 0 10px fade(@color-black, 15%);
@box-shadow-lg: 0 15px 30px fade(@color-black, 25%), 0 0 15px fade(@color-black, 20%);
@box-shadow-xl: 0 20px 40px fade(@color-black, 30%), 0 0 20px fade(@color-black, 25%);

//== Navbar
//
//##

@navbar-toggle-bar-width:   22px;
@navbar-toggle-bar-height:  2px;
@navbar-toggle-spacing:     4px;
@navbar-toggle-height:      ((@navbar-toggle-bar-height * 3) + (@navbar-toggle-spacing * 2));

@navbar-affix-slide-speed:  200ms;


//== Jumbotron
//
//##

// Jumbotron text
@jumbotron-muted:                   contrast(@jumbotron-bg, @text-muted, @text-muted-inverse);
@jumbotron-link-color:              contrast(@jumbotron-bg, @link-color, @link-color-inverse);
@jumbotron-link-hover-color:        contrast(@jumbotron-bg, @link-hover-color, @link-hover-color-inverse);

// Jumbotron overlay
@jumbotron-overlay-bg:              rgba(0, 0, 0, 0.3);

// Jumbotron form
@jumbotron-form-bg:                 @nav-tabs-active-link-hover-bg;
@jumbotron-form-color:              contrast(mix(@jumbotron-form-bg, @jumbotron-bg, alpha(@jumbotron-form-bg) * 100%), @text-color, @text-color-inverse);

// Jumbotron form nav tabs
@jumbotron-nav-link-bg:             rgba(255, 255, 255, 0.2);
@jumbotron-nav-link-color:          @navbar-inverse-link-color;
@jumbotron-nav-link-hover-bg:       rgba(255, 255, 255, 0.3);
@jumbotron-nav-link-hover-color:    @navbar-inverse-link-hover-color;
@jumbotron-nav-active-link-bg:      @jumbotron-form-bg;
@jumbotron-nav-active-link-color:   @jumbotron-nav-link-color;

//== Popovers
//
//##

@popover-bg:                         @panel-bg;
@popover-color:                      @text-color;
@popover-font-size:                  @font-size-base;
@popover-border-color:               @panel-inner-border;
@popover-fallback-border-color:      mix(@panel-inner-border, @panel-bg, (alpha(@panel-inner-border) * 100%));

@popover-border-radius:              @border-radius-large;
@popover-box-shadow:                 @box-shadow-sm;

@popover-title-bg:                   @panel-default-heading-bg;
@popover-title-color:                @popover-color;
@popover-title-font-size:            @font-size-base;

@popover-title-padding:              @padding-base-vertical @padding-base-horizontal;
@popover-content-padding:            @padding-base-vertical @padding-base-horizontal;


//== Modals
//
//##

@modal-xl:     90%;
@modal-xl-max: 1200px;

//== Badges
//
//##

@badge-active-color:          @component-active-bg;
@badge-active-bg:             @component-active-color;


//== Breadcrumbs
//
//##

@breadcrumb-color:              fade(@text-muted, 30%);
@breadcrumb-active-color:       @text-muted;


//== Background variants
//
//##

@bg-default:               @color-white;
@bg-muted:                 rgba(0, 0, 0, 0.07);
@bg-muted-inverse:         rgba(255, 255, 255, 0.35);
@bg-muted-inverse-normal:  rgba(255, 255, 255, 0.85);
@bg-inverse:               @text-color;
@bg-brand:                 darken(@brand-primary, 15%);
@bg-primary:               @brand-primary;
@bg-primary-muted:         lighten(@brand-primary, 57%);
@bg-secondary:             @brand-secondary;
@bg-tertiary:              @brand-tertiary;

//** Product rating color-scale
@product-rating-max:       @product-rating-higher;
@product-rating-higher:    saturate(darken(@brand-success, 24%), 60%);
@product-rating-high:      darken(@brand-success, 7%);
@product-rating-medium:    desaturate(lighten(mix(@brand-success, @brand-warning, 70%), 5%), 5%);
@product-rating-low:       @brand-warning;
@product-rating-lower:     @brand-danger;
@product-rating-none:      @text-faded;


//== Buttons
//
//##
@btn-secondary-color:      contrast(@btn-secondary-bg, @black, @white);
@btn-secondary-bg:         @brand-secondary;
@btn-secondary-border:     @btn-secondary-bg;

@btn-brand-color:          contrast(@btn-secondary-bg, @black, @white);
@btn-brand-bg:             @bg-brand;
@btn-brand-border:         transparent;

//== Thumbnails
//
//##

@thumb-bg:                 @text-faded;
@thumb-hover-bg:           @text-color;
@thumb-hover-opacity:      .5;
@thumb-hover-scale:        1.1;


//== Labels
//
//##
@label-font-size:             @font-size-small;
@label-padding-vertical:      @padding-xs-vertical*2;
@label-padding-horizontal:    @padding-xs-horizontal;

@label-color:                 @color-white;
@label-link-hover-color:      @color-white;

@label-default-bg:            @gray-light;
@label-primary-bg:            @brand-primary;
@label-secondary-bg:          @brand-secondary;
@label-success-bg:            @brand-success;
@label-info-bg:               @brand-info;
@label-warning-bg:            @brand-warning;
@label-danger-bg:             @brand-danger;

@label-default-color:         @label-color;
@label-primary-color:         @label-color;
@label-secondary-color:       @label-color;
@label-success-color:         @label-color;
@label-info-color:            @label-color;
@label-warning-color:         @label-color;
@label-danger-color:          @label-color;

//** Height and width of rounded square and circle labels
@label-fixed-ratio-size:              2.5em;
//** Border radius of rounded square labels
@label-fixed-ratio-radius:            @border-radius-large;


//== Labels muted
//
//##
@label-muted-default-bg:       @gray-lighter;
@label-muted-primary-bg:       @label-muted-default-bg;
@label-muted-secondary-bg:     @label-muted-default-bg;
@label-muted-success-bg:       @label-muted-default-bg;
@label-muted-info-bg:          @label-muted-default-bg;
@label-muted-warning-bg:       @label-muted-default-bg;
@label-muted-danger-bg:        @label-muted-default-bg;

@label-muted-default-color:    @label-default-bg;
@label-muted-primary-color:    @label-primary-bg;
@label-muted-secondary-color:  @label-secondary-bg;
@label-muted-success-color:    @label-success-bg;
@label-muted-info-color:       @label-info-bg;
@label-muted-warning-color:    @label-warning-bg;
@label-muted-danger-color:     @label-danger-bg;


//== Logo
//
// Logo sizes
@logo-width:                0;
@logo-height:               0;
@logo-sm-width:             @logo-width;
@logo-sm-height:            @logo-height;
@logo-md-width:             @logo-width;
@logo-md-height:            @logo-height;
@logo-lg-width:             @logo-width;
@logo-lg-height:            @logo-height;

//== Progress Tracker
//
//##

@progress-tracker-padding-vertical:   @padding-base-vertical;
@progress-tracker-padding-horizontal: @padding-base-horizontal;
//** Space in between steps - useful for when a progress-tracker-bg is defined
@progress-tracker-spacing:            0;
//** Progress tracker step background color – can't currently support rgba because of a subpixel rendering issue on retina screens
@progress-tracker-bg:                 transparent;
//** Progress tracker background for links back
@progress-tracker-hover-color:        darken(@progress-tracker-bg, 5%);
//** Default color for (non-link) step text
@progress-tracker-color:              inherit;
//** Background color of current step in the progress tracker
@progress-tracker-active-bg:          @component-active-bg;
//** Text color of current step in the progress tracker
@progress-tracker-active-color:       @component-active-color;
//** Progress tracker height - for calculating arrow size
@progress-tracker-height:             (@progress-tracker-padding-vertical*2 + @line-height-computed);
//** Progress tracker border - added to bottom of container when inside a panel
@progress-tracker-border:             @panel-inner-border;


//== Footer
//
//##

@footer-font-size:                @font-size-small;
@footer-bg:                       contrast(@text-color-inverse, darken(@body-bg, 60%), lighten(@body-bg, 75%));
@footer-color:                    @text-color-inverse;

@footer-top-font-size:            inherit;
@footer-top-padding-vertical:     @block-padding-medium;
@footer-top-bg:                   transparent;
@footer-top-color:                inherit;
@footer-top-link:                 @link-color-inverse;
@footer-top-link-hover:           @link-hover-color-inverse;

@footer-bottom-font-size:         inherit;
@footer-bottom-padding-vertical:  @block-padding-small;
@footer-bottom-bg:                rgba(0,0,0,0.1);
@footer-bottom-color:             inherit;
@footer-bottom-link:              @link-color-inverse;
@footer-bottom-link-hover:        @link-hover-color-inverse;

@footer-logo:                     "";
@footer-logo-width:               @footer-logo-height;
@footer-logo-height:              @line-height-computed*3;


//== Owl Carousel
//
//##

@owl-nav-position: 10%;
@owl-nav-left:     5%;
@owl-nav-right:    5%;
@owl-nav-size:     @font-size-base * 3;


//== Close
//
//##

@close-font-size:             (@font-size-base * 2);
@close-font-weight:           400;


//== Product lists
//
//##

//** Background of product-list-container (all lists on mobile, only panel lists on tablet and above)
@product-list-bg:                           fadein(darken(@bg-muted, 15%), 25%, relative); // Ensure products stand out
//** Product item list background on tablet and above
@product-list-divided-bg:                   @bg-default;
//** Product grid background on tablet and above
@product-list-panels-grid-bg:               @product-list-bg;

//** Padding around each .product-col
@product-padding:                           ceil(@grid-gutter-width/4);
//** Padding around each .product-col on tablet and above
@product-padding-sm:                        @grid-gutter-width/2;
//** Border color between products
@product-border-color:                      fade(@text-color, 15%);
//** Background color of sub-option (tablet and above)
@product-sub-option-bg:                     @bg-muted;
//** Background color of sub-option in panel (tablet and above)
@product-panel-sub-option-bg:               contrast(@panel-bg, @bg-muted, @bg-muted-inverse);

// Product grid cols - define only if markup (classes) cannot be modified
//** Number of products per row on tablet and above
@product-per-row-sm:                       3;
//** Number of products per row on desktop and above
@product-per-row-md:                       4;
//** Number of products per row on wide-desktop and above
@product-per-row-lg:                       4;

//** Width of product thumb column
@product-thumb-col:                        42%;
//** Width of product thumb column on tablet and above
@product-thumb-col-sm:                     40%;
//** Width of product thumb column on tablet and above - secondary 4-column list style
@product-secondary-thumb-col-sm:           20%;
//** Width of product thumb column on tablet and above for small product lists
@product-thumb-col-small:                  25%;
//** Maximum width (and height with 1:1 aspect ratio) of product thumbnail on mobile
@product-thumb-max-width:                  (@line-height-computed * 6); // ~ 6 lines of text
//** Aspect ratio of product images
@product-thumb-aspect-ratio:               1; // 1:1 by default
//** Aspect ratio of product images (tablet and above)
@product-thumb-aspect-ratio-sm:            (4 / 5);
//** Aspect ratio of product images (tablet and above) - secondary 4-column list style
@product-secondary-thumb-aspect-ratio-sm:  @product-thumb-aspect-ratio; // 1:1 by default
//** Aspect ratio of product images (desktop and above)
@product-thumb-aspect-ratio-md:            (2 / 3);
//** Aspect ratio of product images (desktop and above) - secondary 4-column list style
@product-secondary-thumb-aspect-ratio-md:  (787 / 1160); // Common aspect ratio of tripapp product images;
//** Aspect ratio of product images (wide desktop and above)
@product-thumb-aspect-ratio-lg:            (300 / 555); // Common aspect ratio of themeblueprint product images
//** Aspect ratio of product images (wide desktop and above) - secondary 4-column list style
@product-secondary-thumb-aspect-ratio-lg:  @product-secondary-thumb-aspect-ratio-md;

//** Width of product footer column on tablet and above
@product-footer-col-sm:                    24%;
//** Width of product footer column on tablet and above - secondary 4-column list style
@product-secondary-footer-col-sm:          48%;
//** Width of product footer column on desktop and above
@product-footer-col-md:                    20%;
//** Width of product footer column on desktop and above - secondary 4-column list style
@product-secondary-footer-col-md:          40%;
//** Width of product footer column on tablet and above for small product lists
@product-footer-col-small:                 30%;

//** Size of product logo (currently only supported in grid layout)
@product-logo-size:                        (floor(((@container-md / 4) - (@product-padding-sm*2))/3)); // Proportional (~1/3) to the smallest column width

//** Color of product stars - for hotel star ratings
@product-stars-color:                      gold;


//== Type
//
//##

//** Text muted color - based on default text color
@text-muted:               fadeout(@text-color, 30%, relative);
//** Text muted color - inverted
@text-muted-inverse:       fadeout(@text-color-inverse, 30%, relative);
//** Text faded color - not ideal for copy
@text-faded:               fadeout(@text-muted, 40%, relative);
//** Headings small color - inherit by default
@headings-small-color:     inherit;
//** Horizontal line color - inverted
@hr-border-inverse:        fade(@text-color-inverse, 18%);
//** Inline list spacing
@list-inline-padding:      5px;


//== Text utilities
//
//##

// Line height scale
// This can/should be overridden by each brand
@line-height-0 : 1;
@line-height-1 : 1.1;
@line-height-2 : 1.25;
@line-height-3 : 1.5;
@line-height-4 : 2;

//== Z-index master list  
//  
// Warning: Avoid customizing these values. They're used for a bird's eye view  
// of components dependent on the z-axis and are designed to all work together. 

@zindex-sticky: 1020;  
@zindex-fixed:  1030; 


//== Discovery Calendar
//
//##

@calendar-heading-color:        @text-color;
@calendar-cell-color:           @text-color;
@calendar-disabled-cell-color:  @calendar-cell-color;
@calendar-cell-hover:           lighten(@brand-primary,10%);
@calendar-cell-selected:        @brand-primary;
@calendar-cell-selected-color:  @text-color-inverse;
@calendar-cheapest:             @brand-success;



//== React datepicker
// https://github.com/Hacker0x01/react-datepicker/blob/master/src/stylesheets/variables.scss
// Mapping picker variables to bootstrap equivalent
//
//##
@datepicker__background-color: @dropdown-bg;
@datepicker__border-color: @dropdown-border;
@datepicker__highlighted-color: @brand-secondary;
@datepicker__muted-color: @text-muted;
@datepicker__selected-color: @brand-primary;
@datepicker__hover-color: @gray-lighter;
@datepicker__text-color: @text-color;
@datepicker__header__color: @text-color;
@datepicker__header__background-color: @gray-lighter;
@datepicker__navigation-disabled-color: @text-faded;

@datepicker__border-radius: @border-radius-base;
@datepicker__day-margin: @padding-xs-vertical;
@datepicker__font-size: @font-size-base;
@datepicker__font-size-large: @font-size-large;
@datepicker__font-size-small: @font-size-small;
@datepicker__font-family: @font-family-base;
@datepicker__item-size: @datepicker__font-size*2;
@datepicker__item-border-radius: @datepicker__item-size;
@datepicker__margin: @padding-small-horizontal;
@datepicker__navigation-size: @font-size-base/2;
@datepicker__triangle-size: @font-size-base/2;

@datepicker__box-shadow: @popover-box-shadow;

//** Container narrow
@container-narrow-sm-max-width: 750px;
@container-narrow-md-max-width: 800px;

//== Deal finder
//
//##

// general
@deal-finder-primary-color: @brand-primary;
@deal-finder-main-background-color: @color-white;
@deal-finder-main-text-color: @color-black;
@deal-finder-main-padding: 18px;
@deal-finder-tiny-font-size: 10px;
@deal-finder-tiny-line-height: 14px;
@deal-finder-modal-radius: 18px;
@deal-finder-calendar-padding-y: 24px;
@deal-finder-calendar-padding-y-mobile: 8px;
@deal-finder-calendar-column-gap: 6px;
@deal-finder-calendar-column-gap-mobile: 3px;
@deal-finder-calendar-row-gap: 8px;
@deal-finder-calendar-row-gap-mobile: 3px;
@deal-finder-main-transition-duration: .2s;
// header
@deal-finder-header-background: @deal-finder-primary-color;
@deal-finder-header-text-color: @color-white;
@deal-finder-header-pt: 26px;
@deal-finder-header-pr: 28px;
@deal-finder-header-pb: 16px;
@deal-finder-header-pl: 36px;
@deal-finder-header-pl-mobile: 23px;
@deal-finder-header-heading-font-size: 33px;
@deal-finder-header-heading-font-size-mobile: 22px;
@deal-finder-header-heading-line-height: 36px;
@deal-finder-header-heading-line-height-mobile: 25px;
@deal-finder-header-subheading-font-size: 20px;
@deal-finder-header-subheading-font-size-mobile: 16px;
@deal-finder-header-subheading-line-height: 20px;
// navigation
@deal-finder-navigation-font-size: 20px;
@deal-finder-navigation-line-height: 28px;
@deal-finder-navigation-text-color: @color-black;
@deal-finder-navigation-text-color-hover: rgba(255, 255, 255, 0.3);
@deal-finder-navigation-width: 100px;
// weekdays
@deal-finder-weekdays-font-size-mobile: 12px;
@deal-finder-weekdays-line-height-mobile: 18px;
// day
@deal-finder-day-height: 70px;
@deal-finder-day-height-mobile: 54px;
@deal-finder-day-border: 1px solid @color-black;
@deal-finder-day-border-disabled: 1px solid rgba(0, 0, 0, 0.1);
@deal-finder-day-border-radius: 8px;
@deal-finder-day-text-color: @color-black;
@deal-finder-day-text-color-hover: @color-white;
@deal-finder-day-text-color-disabled: rgba(51, 51, 51, 0.19);
@deal-finder-day-date-font-size: 20px;
@deal-finder-day-date-font-size-mobile: 14px;
@deal-finder-day-date-line-height: 28px;
@deal-finder-day-date-line-height-mobile: 18px;
@deal-finder-day-price-font-size: 13px;
@deal-finder-day-price-font-size-mobile: 11px;
@deal-finder-day-price-line-height: 16px;
@deal-finder-day-price-line-height-mobile: 18px;
@deal-finder-day-background-color-hover: rgba(255, 255, 255, 0.3);
// footer
@deal-finder-footer-background-colour: @gray-lighter;
@deal-finder-footer-footnote-colour: @gray;
@deal-finder-footer-event-name-font-size: 12px;
@deal-finder-footer-event-name-line-height: 14px;
// button (on tripapp)
@deal-finder-button-color: @color-black;
@deal-finder-button-border: 2px solid @color-black;
@deal-finder-background-color: @color-white;
@deal-finder-background-color-hover: @gray-lighter;