/*
 * Widths
 */
@wrapper_width: 1360px;
@medium_width: 800px;
@mobile_width: 640px;

/*
 * Standard margin
 */

@margin: 20px;

/*
 * The Grid
 */
@gutter_width: @margin;
@column_count: 24;

/*
 * Typography
 */
@base_font_size: 16;

/*
 * Border Radius
 */
@border_radius: 5px;

/*
 * Colours
 */
@border_color: #dde3e8;
@text_color: #323232;

@primary_color: #449bf7;
@secondary_color: #4ed2b5;

/*
 * Dark background / Light text
 */
@dark_color: #323232;
@light_text_color: @light_color;

/*
 * Light background / Dark text
 */
@light_color: #edf0f2;
@dark_text_color: @text_color;
@med_color: #b7babc;

/*
 * Alert Colours
 */
@alert_color: #e74c3c;
@information_color: #f1c40f;
@success_color: #2ecc71;

/*
 * Misc Colours
 */
@highlight_color: @primary_color;
@background_color: @light_color;
@mtc_blue: #0f55c4;

/*
 * Mobile Menu
 */
@flyout_breakpoint: 767px;
@flyout_width: 80%;
@flyout_button: #fff;
@flyout_background: rgba(50, 50, 50, 0.97);
@flyout_transition_time: 0.3s;

@flyout: ~"all and (max-width: @{flyout_breakpoint})";
@above_flyout: ~"all and (min-width: @{flyout_breakpoint})";

/*
 * 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) ~ ")";
@medium: ~"all and (min-width: " (@medium_width + 1) ~ ") and (max-width: @{wrapper_width})";
@mobile: ~"all and (max-width: @{mobile_width})";

/*
 * HTML Tag
 */
html {
    font-size: @base_font_size + 0px;

    &:before {
        content: 'tablet: @{wrapper_width}, mobile: @{mobile_width}, flyout: @{flyout_breakpoint}, medium: @{medium_width}';
        position: absolute;
        top: 0;
        visibility: hidden;
    }
}