// Quasar Stylus Variables
// --------------------------------------------------
// These values need to be set manually in .storybook/preview.js to apply to storybook

$button-rounded-border-radius = 15px
$button-padding = 12px 12px
$button-font-size ?= 13px
$button-line-height ?= 1rem
$button-font-weight ?= 500

$space-base   ?= 5px
$space-x-base ?= $space-base
$space-y-base ?= $space-base
$space-none   ?= { x: 0, y: 0 }
$space-xxs    ?= { x: $space-base, y: $space-base  }
$space-xs     ?= { x: ($space-x-base*2), y: ($space-y-base*2) }
$space-sm     ?= { x: ($space-x-base*3), y: ($space-y-base*3) }
$space-md     ?= { x: ($space-x-base*4), y: ($space-y-base*4) }
$space-lg     ?= { x: ($space-x-base*5), y: ($space-y-base*5) }
$space-xl     ?= { x: ($space-x-base*6), y: ($space-y-base*6) }
$space-xxl    ?= { x: ($space-x-base*7), y: ($space-y-base*7) }
$space-xxxl   ?= { x: ($space-x-base*8), y: ($space-y-base*8) }

$spaces ?= {
  none: $space-none,
  xxs: $space-xxs,
  xs: $space-xs,
  sm: $space-sm,
  md: $space-md,
  lg: $space-lg,
  xl: $space-xl
  xxl: $space-xxl
  xxxl: $space-xxxl
}

$flex-gutter-xxs ?= ($space-base)
$flex-gutter-xs  ?= ($space-base * 2)
$flex-gutter-sm  ?= ($space-base * 3)
$flex-gutter-md  ?= ($space-base * 4)
$flex-gutter-lg  ?= ($space-base * 5)
$flex-gutter-xl  ?= ($space-base * 6)

$body-font-size   ?= 15px
$body-line-height ?= 1.5
$typography-font-family         ?= 'Source Sans Pro', sans-serif
$min-line-height                ?= 1.12


$flex-gutter ?= {
  none: 0,
  xxs: $flex-gutter-xxs,
  xs: $flex-gutter-xs,
  sm: $flex-gutter-sm,
  md: $flex-gutter-md,
  lg: $flex-gutter-lg,
  xl: $flex-gutter-xl
}

// Max width at which point
// current size ends
$breakpoint-xs ?= 599px
$breakpoint-sm ?= 767px
$breakpoint-md ?= 1279px
$breakpoint-lg ?= 1569px

$sizes ?= {
  xs: 0,                  // Extra small screen
  sm: $breakpoint-xs + 1, // Small screen
  md: $breakpoint-sm + 1, // Medium screen
  lg: $breakpoint-md + 1, // Large screen
  xl: $breakpoint-lg + 1  // Extra large screen
}

$breakpoint-xs-max ?= ($sizes.sm - 0.02)
$breakpoint-sm-min ?= $sizes.sm
$breakpoint-sm-max ?= ($sizes.md - 0.02)
$breakpoint-md-min ?= $sizes.md
$breakpoint-md-max ?= ($sizes.lg - 0.02)
$breakpoint-lg-min ?= $sizes.lg
$breakpoint-lg-max ?= ($sizes.xl - 0.02)
$breakpoint-xl-min ?= $sizes.xl

//- Custom colors

$primary   = #242f5d
$secondary = #3f64ee
$positive  = #16B59B
$negative  = #EF3F69

$neutral  = #f99f17
.text-neutral
  color: $neutral !important;
.bg-neutral
  background: $neutral !important;

$positive-dark = #0d917b
.text-positive-dark
  color: $positive-dark !important;
.bg-positive-dark
  background: $positive-dark !important;

$negative-dark = #cb1843
.text-negative-dark
  color: $positive-dark !important;
.bg-negative-dark
  background: $negative-dark !important;

$heading = #3e3b46
.text-heading
  color: $heading !important;
.bg-heading
  background: $heading !important;

$body = #6a6671
.text-body
  color: $body !important;
.bg-body
  background: $body !important;

$disabled = #cbcdd1
.text-disabled
  color: $disabled !important;
.bg-disabled
  background: $disabled !important;

$internal-bg = #f1f1f3
.text-internal-bg
  color: $internal-bg !important;
.bg-internal-bg
  background: $internal-bg !important;

$external-bg = #ffffff
.text-external-bg
  color: $external-bg !important;
.bg-external-bg
  background: $external-bg !important;

$accent    = #5bd4ca
$warning   = #ffbf40
$info      = $neutral
$font-color = $body