//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: 16;

//Border Radius
@border_radius: 4px;


//Colours
@primary_color: #0f55c4;
@secondary_color: #0f55c4;
@third_color: #0f55c4;
@forth_color: #0f55c4;
@tertiary_color: #F8F8F8;
@mid_color: color-mix(in srgb, #0f55c4, var(--light_mixin_color) 8%);
@darken_mixin_color: #000;
@light_mixin_color: #fff;
@fade_mixin_color: transparent;

@faded_primary:	color-mix(in srgb, var(--fade_mixin_color), var(--primary_color) 8%);
@faded_secondary: color-mix(in srgb, var(--fade_mixin_color), var(--secondary_color) 8%);

@light_primary: #0f55c4;
@light_secondary: color-mix(in srgb, var(--secondary_color), transparent 10%);

@dark_primary: color-mix(in srgb,#0f55c4,var(--darken_mixin_color) 30%);
@dark_secondary: color-mix(in srgb,var(--secondary_color),var(--darken_mixin_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: color-mix(in srgb, #0f55c4, var(--darken_mixin_color) 30%);
@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)";



// Root variables
:root {
    //Widths
    --wrapper_width: @wrapper_width;
    --wrapper_width_narrow: @wrapper_width_narrow;

    --wrapper_padding_width: @wrapper_padding_width;
    --product_breakpoint_width: @product_breakpoint_width;
    --medium_width: @medium_width;
    --mobile_width: @mobile_width;

    //The Grid
    --gutter_width: @gutter_width;
    --gutter_space: @gutter_space;

    --gutter_width_flyout: @gutter_width_flyout;
    --gutter_space_flyout: @gutter_space_flyout;

    --gutter_width_mobile: @gutter_width_mobile;
    --gutter_space_mobile: @gutter_space_mobile;

    --top_bottom_gutter: @top_bottom_gutter;
    --top_bottom_gutter_flyout: @top_bottom_gutter_flyout;
    --top_bottom_gutter_mobile: @top_bottom_gutter_mobile;
    --column_count: @column_count;

    --page_side_padding: @page_side_padding;

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

    --wrapper_padding: @wrapper_padding;
    --wrapper_padding_mobile: @wrapper_padding_mobile;

    //Typography
    --base_font_size: @base_font_size;

    //Border Radius
    --border_radius: @border_radius;


    //Colours
    --primary_color: @primary_color;
    --secondary_color: @secondary_color;
    --third_color: @third_color;
    --forth_color: @forth_color;
    --tertiary_color: @tertiary_color;
    --mid_color: @mid_color;
    --faded_primary: @faded_primary;
    --faded_secondary: @faded_secondary;
    --light_primary: @light_primary;
    --light_secondary: @light_secondary;
    --dark_primary: @dark_primary;
    --dark_secondary: @dark_secondary;
    --mid_primary: @mid_primary;
    --product_cta_color: @product_cta_color;
    --input_icon_color: @input_icon_color;
    --text_color: @text_color;
    --darken_mixin_color: @darken_mixin_color;
    --light_mixin_color: @light_mixin_color;
    --fade_mixin_color: @fade_mixin_color;
    --text_color_lighter: @text_color;
    --text_color_alt: @text_color;
    --dark_title_color: @text_color;
    --text_color_light: @text_color_light;

    //Dark background / Light text
    --dark_color: @dark_color;
    --dark_text_color: @dark_text_color;
    --light_color: @light_color;
    --light_text_color: @light_text_color;
    --light_alt: @light_alt;
    --med_color: @med_color;

    //Buttons
    --dark_button_color: @dark_color;

    //Borders
    --border_color: @border_color;
    --border_color_alt: @border_color_alt;
    --border_color_dark: @border_color_dark;

    //Shop colors
    --stock_bubble_color: @primary_color;

    //Product cards
    --product_card_light_color: @light_color;

    //Assessments
    --assessment_content_background: @assessment_content_background;
    --assessment_dark_color: @dark_color;

    //Alert Colours
    --alert_color: @alert_color;
    --information_color: @information_color;
    --success_color: @success_color;
    --note_color: @note_color;

    //Misc Colours
    --highlight_color: @secondary_color;
    --background_color: @background_color;
    --mtc_blue: @mtc_blue;

    //Media Query Breakpoints
    --desktop: @desktop;
    --tablet: @tablet;
    --product_breakpoint: @product_breakpoint;
    --medium: @medium;
    --mobile: @mobile;
    --members_split: @members_split;

    //Header
    --global_fa_font_weight: @global_fa_font_weight;
    --logo_mobile_height: @logo_mobile_height;

    //Menu
    --menu_chevron_color: @text_color;

    //USP banner
    --usp_banner_bg_color: @dark_color;
    --usp_banner_color: @usp_banner_color;
    --usp_banner_icon_display: @usp_banner_icon_display;

    --header_actions_color: @header_actions_color;
    --header_actions_bg_color: @header_actions_bg_color;

    //Mobile
    --product_sidebar_mobile_breakpoint: @product_sidebar_mobile_breakpoint;


    --menu_transition_speed: @menu_transition_speed;
    --menu_transition_easing: @menu_transition_easing;

    --header_width: @header_width;
    --header_height: @header_height;

    /*
    * Flyout
     */
    --flyout_breakpoint: @flyout_breakpoint;
    --flyout_width: @flyout_width;
    --flyout_mobile_width: @flyout_mobile_width;
    --flyout_button_color: @text_color;
    --flyout_transition_time: @flyout_transition_time;

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

    --flyout_background_mobile: @dark_primary;
    --flyout_text_color_mobile: @flyout_text_color_mobile;
    --flyout_link_color_mobile: @flyout_link_color_mobile;

    --flyout_menu_padding_top: @flyout_menu_padding_top;
    --flyout_menu_padding_side: @flyout_menu_padding_side;
    --flyout_border_color: @border_color_alt;
    --flyout_shadow: @flyout_shadow;


    --flyout_breakpoint_plus: @flyout_breakpoint_plus;
    --flyout: @flyout;
    --above_flyout: @above_flyout;
    --large_tablet: @large_tablet;
    --above_large_tablet: @above_large_tablet;
    --header_mobile_breakpoint: @header_mobile_breakpoint;
}
