//Widths
@wrapper_width: 1380px;
@wrapper_width_narrow: 1200px;

@wrapper_padding_width: @wrapper_width + 48px;
@product_breakpoint_width: 980px;
@medium_width: 800px;
@mobile_width: 640px;

//The Grid
@gutter_width: 32px;
@gutter_space: @gutter_width * 2;

@gutter_width_flyout: 24px;
@gutter_space_flyout: @gutter_width_flyout * 2;

@gutter_width_mobile: 16px;
@gutter_space_mobile: @gutter_width_mobile * 2;

@top_bottom_gutter: 53.5px;
@top_bottom_gutter_flyout: 32px;
@top_bottom_gutter_mobile: 32px;
@column_count: 24;

@page_side_padding: 25px;

//Main content
@content_padding_top: 24px;
@content_padding_bottom: 24px;
@content_padding_top_flyout: 24px;
@content_padding_bottom_flyout: 24px;
@content_padding_top_mobile: 24px;
@content_padding_bottom_mobile: 24px;

@wrapper_padding: 24px;
@wrapper_padding_mobile: 24px;

//Typography
@base_font_size: 14;

//Border Radius
@border_radius: 4px;


//Colours
@primary_color: #0f55c4;
@secondary_color: #0f55c4;
@third_color: #0f55c4;
@forth_color: #0f55c4;
@tertiary_color: #F8F8F8;
@mid_color: lighten(#0f55c4, 8%);

@faded_primary:	fade(@primary_color, 8%);
@faded_secondary: fade(@secondary_color, 8%);

@light_primary: lighten(@primary_color, 8%);
@light_secondary: lighten(@secondary_color, 8%);




@dark_primary: darken(#0f55c4, 30%, relative);
@dark_secondary: darken(@secondary_color, 8%);
@mid_primary: @primary_color;

@product_cta_color: @secondary_color;

@input_icon_color: rgba(98, 109, 126, 1);


@text_color: #424452;
@text_color_lighter: @text_color;
@text_color_alt: @text_color;
@dark_title_color: @text_color;


@text_color_light: #FFFFFF;

//Dark background / Light text
@dark_color: darken(#0f55c4, 30%, relative);
@dark_text_color: #FFFFFF;

@light_color: #F8F8F8;
@light_text_color: @text_color;

@light_alt: @light_color;

@med_color: @light_color;

//Buttons
@dark_button_color: @dark_color;

//Borders
@border_color: #C7C7C7;
@border_color_alt: #C7C7C7;
@border_color_dark: rgba(102, 102, 102, 0.5);

//Shop colors
@stock_bubble_color: @primary_color;

//Product cards
@product_card_light_color: @light_color;

//Assessments
@assessment_content_background: #fff;
@assessment_dark_color: @dark_color;

//Alert Colours
@alert_color: #F55D3E;
@information_color: rgb(44, 121, 173);
@success_color: #458546;
@note_color: @information_color;


//Misc Colours
@highlight_color: @secondary_color;
@background_color: #FFF;
@mtc_blue: #0f55c4;

//Media Query Breakpoints
@desktop: ~"all and (min-width: " (@wrapper_width + 20) ~ ")";
@tablet: ~"all and (min-width: " (@mobile_width + 1) ~ ") and (max-width: " (@wrapper_width + 19) ~ ")";
@product_breakpoint: ~"all and (max-width: @{product_breakpoint_width})";
@medium: ~"all and (min-width: " (@medium_width + 1) ~ ") and (max-width: @{wrapper_width})";
@mobile: ~"all and (max-width: @{mobile_width})";
@members_split: ~"all and (max-width: 840px)";

//Header
@global_fa_font_weight: 400;
@logo_mobile_height: 36px;

//Menu
@menu_chevron_color: @text_color;

//USP banner
@usp_banner_bg_color: @dark_color;
@usp_banner_color: #fff;
@usp_banner_icon_display: flex;

@header_actions_color: #424242;
@header_actions_bg_color: transparent;

//Mobile
@product_sidebar_mobile_breakpoint: 1070px;


@menu_transition_speed: 400ms;
@menu_transition_easing: linear;

@header_width: 100vw;
@header_height: 96px;

/*
* Flyout
 */
@flyout_breakpoint: 1120px;
@flyout_width: 100%;
@flyout_mobile_width: 100%;
@flyout_button_color: @text_color;
@flyout_background: @dark_color;
@flyout_transition_time: 300ms;

@flyout_background: @light_color;
@flyout_text_color: @text_color;
@flyout_link_color: @text_color;

@flyout_background_mobile: @dark_primary;
@flyout_text_color_mobile: #fff;
@flyout_link_color_mobile: #fff;

@flyout_menu_padding_top: 16px;
@flyout_menu_padding_side: 16px;
@flyout_border_color: @border_color_alt;
@flyout_shadow: 4px 0 16px 0px rgba(0,0,0,0.2);


@flyout_breakpoint_plus: (@flyout_breakpoint + 1px);
@flyout: ~"all and (max-width: @{flyout_breakpoint})";
@above_flyout: ~"all and (min-width: @{flyout_breakpoint_plus})";
@large_tablet: ~"all and (max-width: 1200px)";
@above_large_tablet: ~"all and (min-width: 1201px)";
@header_mobile_breakpoint: ~"all and (max-width: 800px)";
