@use "variables" as *;
// breakpoint values used for below only
$bp-xs:   480px !default;
$bp-s:    620px !default;
$bp-m:    780px !default;
$bp-l:    910px !default;
$bp-l-ex: 1050px !default;
$bp-xl:   1200px !default;


// Global breakpoint media variables.
$bp-x-small-min:            "min-width: " + ($bp-xs + 1) !default;
$bp-x-small-max:            "max-width:"  +  $bp-xs !default;
$bp-small-min:              "min-width: " + ($bp-s + 1) !default;
$bp-small-max:              "max-width:"  +  $bp-s !default;
$bp-medium-min:             "min-width: " + ($bp-m + 1) !default;
$bp-medium-max:             "max-width:"  +  $bp-m !default;
$bp-large-min:              "min-width: " + ($bp-l + 1) !default;
$bp-large-max:              "max-width:"  +  $bp-l !default;
$bp-large-extended:         "max-width:"  +  $bp-l-ex !default;
$bp-large-extended-min:     "min-width: " + ($bp-l-ex + 1) !default;
$bp-x-large-min:            "min-width: " + ($bp-xl + 1) !default;
$bp-x-large-max:            "max-width:"  +  $bp-xl !default;

// See max-width in variables
$bp-page-width-min:         "min-width:"  + ($max-width + 1) !default;
$bp-page-width-max:         "max-width:"  + $max-width !default;


// One-off breakpoints (consider consolidation)
$bp-centered-content-width: "min-width: 1315px" !default;

// Semi Global breakpoint media variables
// switch the header from full width to hamburger
$bp-header-toggle-min:      "min-width: 841px" !default;
$bp-header-toggle-max:      "max-width: 840px" !default;

// Feedback form custom breakpoint
$bp-feedback-min:           "min-width: 650px" !default;