$primary   ?= #027be3
$secondary ?= #26A69A
$tertiary  ?= #555

$neutral   ?= #E0E1E2
$positive  ?= #21BA45
$negative  ?= #DB2828
$info      ?= #31CCEC
$warning   ?= #F2C037

$light     ?= #f4f4f4
$dark      ?= #333
$faded     ?= #777

$text-color          ?= lighten(black, 17%)
$background-color    ?= white

$link-color          ?= lighten($primary, 25%)
$link-color-active   ?= $primary

$red = #f44336
$red-1 = #ffebee
$red-2 = #ffcdd2
$red-3 = #ef9a9a
$red-4 = #e57373
$red-5 = #ef5350
$red-6 = #f44336
$red-7 = #e53935
$red-8 = #d32f2f
$red-9 = #c62828
$red-10 = #b71c1c
$red-11 = #ff8a80
$red-12 = #ff5252
$red-13 = #ff1744
$red-14 = #d50000
$pink = #e91e63
$pink-1 = #fce4ec
$pink-2 = #f8bbd0
$pink-3 = #f48fb1
$pink-4 = #f06292
$pink-5 = #ec407a
$pink-6 = #e91e63
$pink-7 = #d81b60
$pink-8 = #c2185b
$pink-9 = #ad1457
$pink-10 = #880e4f
$pink-11 = #ff80ab
$pink-12 = #ff4081
$pink-13 = #f50057
$pink-14 = #c51162
$purple = #9c27b0
$purple-1 = #f3e5f5
$purple-2 = #e1bee7
$purple-3 = #ce93d8
$purple-4 = #ba68c8
$purple-5 = #ab47bc
$purple-6 = #9c27b0
$purple-7 = #8e24aa
$purple-8 = #7b1fa2
$purple-9 = #6a1b9a
$purple-10 = #4a148c
$purple-11 = #ea80fc
$purple-12 = #e040fb
$purple-13 = #d500f9
$purple-14 = #aa00ff
$deep-purple = #673ab7
$deep-purple-1 = #ede7f6
$deep-purple-2 = #d1c4e9
$deep-purple-3 = #b39ddb
$deep-purple-4 = #9575cd
$deep-purple-5 = #7e57c2
$deep-purple-6 = #673ab7
$deep-purple-7 = #5e35b1
$deep-purple-8 = #512da8
$deep-purple-9 = #4527a0
$deep-purple-10 = #311b92
$deep-purple-11 = #b388ff
$deep-purple-12 = #7c4dff
$deep-purple-13 = #651fff
$deep-purple-14 = #6200ea
$indigo = #3f51b5
$indigo-1 = #e8eaf6
$indigo-2 = #c5cae9
$indigo-3 = #9fa8da
$indigo-4 = #7986cb
$indigo-5 = #5c6bc0
$indigo-6 = #3f51b5
$indigo-7 = #3949ab
$indigo-8 = #303f9f
$indigo-9 = #283593
$indigo-10 = #1a237e
$indigo-11 = #8c9eff
$indigo-12 = #536dfe
$indigo-13 = #3d5afe
$indigo-14 = #304ffe
$blue = #2196f3
$blue-1 = #e3f2fd
$blue-2 = #bbdefb
$blue-3 = #90caf9
$blue-4 = #64b5f6
$blue-5 = #42a5f5
$blue-6 = #2196f3
$blue-7 = #1e88e5
$blue-8 = #1976d2
$blue-9 = #1565c0
$blue-10 = #0d47a1
$blue-11 = #82b1ff
$blue-12 = #448aff
$blue-13 = #2979ff
$blue-14 = #2962ff
$light-blue = #03a9f4
$light-blue-1 = #e1f5fe
$light-blue-2 = #b3e5fc
$light-blue-3 = #81d4fa
$light-blue-4 = #4fc3f7
$light-blue-5 = #29b6f6
$light-blue-6 = #03a9f4
$light-blue-7 = #039be5
$light-blue-8 = #0288d1
$light-blue-9 = #0277bd
$light-blue-10 = #01579b
$light-blue-11 = #80d8ff
$light-blue-12 = #40c4ff
$light-blue-13 = #00b0ff
$light-blue-14 = #0091ea
$cyan = #00bcd4
$cyan-1 = #e0f7fa
$cyan-2 = #b2ebf2
$cyan-3 = #80deea
$cyan-4 = #4dd0e1
$cyan-5 = #26c6da
$cyan-6 = #00bcd4
$cyan-7 = #00acc1
$cyan-8 = #0097a7
$cyan-9 = #00838f
$cyan-10 = #006064
$cyan-11 = #84ffff
$cyan-12 = #18ffff
$cyan-13 = #00e5ff
$cyan-14 = #00b8d4
$teal = #009688
$teal-1 = #e0f2f1
$teal-2 = #b2dfdb
$teal-3 = #80cbc4
$teal-4 = #4db6ac
$teal-5 = #26a69a
$teal-6 = #009688
$teal-7 = #00897b
$teal-8 = #00796b
$teal-9 = #00695c
$teal-10 = #004d40
$teal-11 = #a7ffeb
$teal-12 = #64ffda
$teal-13 = #1de9b6
$teal-14 = #00bfa5
$green = #4caf50
$green-1 = #e8f5e9
$green-2 = #c8e6c9
$green-3 = #a5d6a7
$green-4 = #81c784
$green-5 = #66bb6a
$green-6 = #4caf50
$green-7 = #43a047
$green-8 = #388e3c
$green-9 = #2e7d32
$green-10 = #1b5e20
$green-11 = #b9f6ca
$green-12 = #69f0ae
$green-13 = #00e676
$green-14 = #00c853
$light-green = #8bc34a
$light-green-1 = #f1f8e9
$light-green-2 = #dcedc8
$light-green-3 = #c5e1a5
$light-green-4 = #aed581
$light-green-5 = #9ccc65
$light-green-6 = #8bc34a
$light-green-7 = #7cb342
$light-green-8 = #689f38
$light-green-9 = #558b2f
$light-green-10 = #33691e
$light-green-11 = #ccff90
$light-green-12 = #b2ff59
$light-green-13 = #76ff03
$light-green-14 = #64dd17
$lime = #cddc39
$lime-1 = #f9fbe7
$lime-2 = #f0f4c3
$lime-3 = #e6ee9c
$lime-4 = #dce775
$lime-5 = #d4e157
$lime-6 = #cddc39
$lime-7 = #c0ca33
$lime-8 = #afb42b
$lime-9 = #9e9d24
$lime-10 = #827717
$lime-11 = #f4ff81
$lime-12 = #eeff41
$lime-13 = #c6ff00
$lime-14 = #aeea00
$yellow = #ffeb3b
$yellow-1 = #fffde7
$yellow-2 = #fff9c4
$yellow-3 = #fff59d
$yellow-4 = #fff176
$yellow-5 = #ffee58
$yellow-6 = #ffeb3b
$yellow-7 = #fdd835
$yellow-8 = #fbc02d
$yellow-9 = #f9a825
$yellow-10 = #f57f17
$yellow-11 = #ffff8d
$yellow-12 = #ffff00
$yellow-13 = #ffea00
$yellow-14 = #ffd600
$amber = #ffc107
$amber-1 = #fff8e1
$amber-2 = #ffecb3
$amber-3 = #ffe082
$amber-4 = #ffd54f
$amber-5 = #ffca28
$amber-6 = #ffc107
$amber-7 = #ffb300
$amber-8 = #ffa000
$amber-9 = #ff8f00
$amber-10 = #ff6f00
$amber-11 = #ffe57f
$amber-12 = #ffd740
$amber-13 = #ffc400
$amber-14 = #ffab00
$orange = #ff9800
$orange-1 = #fff3e0
$orange-2 = #ffe0b2
$orange-3 = #ffcc80
$orange-4 = #ffb74d
$orange-5 = #ffa726
$orange-6 = #ff9800
$orange-7 = #fb8c00
$orange-8 = #f57c00
$orange-9 = #ef6c00
$orange-10 = #e65100
$orange-11 = #ffd180
$orange-12 = #ffab40
$orange-13 = #ff9100
$orange-14 = #ff6d00
$deep-orange = #ff5722
$deep-orange-1 = #fbe9e7
$deep-orange-2 = #ffccbc
$deep-orange-3 = #ffab91
$deep-orange-4 = #ff8a65
$deep-orange-5 = #ff7043
$deep-orange-6 = #ff5722
$deep-orange-7 = #f4511e
$deep-orange-8 = #e64a19
$deep-orange-9 = #d84315
$deep-orange-10 = #bf360c
$deep-orange-11 = #ff9e80
$deep-orange-12 = #ff6e40
$deep-orange-13 = #ff3d00
$deep-orange-14 = #dd2c00
$brown = #795548
$brown-1 = #efebe9
$brown-2 = #d7ccc8
$brown-3 = #bcaaa4
$brown-4 = #a1887f
$brown-5 = #8d6e63
$brown-6 = #795548
$brown-7 = #6d4c41
$brown-8 = #5d4037
$brown-9 = #4e342e
$brown-10 = #3e2723
$brown-11 = #d7ccc8
$brown-12 = #bcaaa4
$brown-13 = #8d6e63
$brown-14 = #5d4037
$grey = #9e9e9e
$grey-1 = #fafafa
$grey-2 = #f5f5f5
$grey-3 = #eeeeee
$grey-4 = #e0e0e0
$grey-5 = #bdbdbd
$grey-6 = #9e9e9e
$grey-7 = #757575
$grey-8 = #616161
$grey-9 = #424242
$grey-10 = #212121
$grey-11 = #f5f5f5
$grey-12 = #eeeeee
$grey-13 = #bdbdbd
$grey-14 = #616161
$blue-grey = #607d8b
$blue-grey-1 = #eceff1
$blue-grey-2 = #cfd8dc
$blue-grey-3 = #b0bec5
$blue-grey-4 = #90a4ae
$blue-grey-5 = #78909c
$blue-grey-6 = #607d8b
$blue-grey-7 = #546e7a
$blue-grey-8 = #455a64
$blue-grey-9 = #37474f
$blue-grey-10 = #263238
$blue-grey-11 = #cfd8dc
$blue-grey-12 = #b0bec5
$blue-grey-13 = #78909c
$blue-grey-14 = #455a64


$colors ?= {
  neutral: $neutral
  primary: $primary
  secondary: $secondary
  tertiary: $tertiary
  positive: $positive
  negative: $negative
  warning: $warning
  info: $info
  light: $light
  dark: $dark,

  red: $red,
  pink: $pink,
  purple: $purple,
  deep-purple: $deep-purple,
  indigo: $indigo,
  blue: $blue,
  light-blue: $light-blue,
  cyan: $cyan,
  teal: $teal,
  green: $green,
  light-green: $light-green,
  lime: $lime,
  yellow: $yellow,
  amber: $amber,
  orange: $orange,
  deep-orange: $deep-orange,
  brown: $brown,
  grey: $grey,
  blue-grey: $blue-grey
}

$z-marginals      ?= 10
$z-fab            ?= 20
$z-drawer         ?= 30
$z-notifier       ?= 40
$z-tooltip        ?= 50
$z-dropdown       ?= 60

$z-body-dimmed    ?= 100
$z-absolute       ?= 200


$shadow-color ?= black
$shadow-transition ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)

$inset-shadow = 0 7px 9px -7px alpha($shadow-color, .7) inset

$shadow-1 = 0 1px 3px alpha($shadow-color, .12), 0 1px 2px alpha($shadow-color, .24)
$shadow-2 = 0 3px 6px alpha($shadow-color, .16), 0 3px 6px alpha($shadow-color, .23)
$shadow-3 = 0 10px 20px alpha($shadow-color, .19), 0 6px 6px alpha($shadow-color, .23)
$shadow-4 = 0 14px 28px alpha($shadow-color, .25), 0 10px 10px alpha($shadow-color, .22)
$shadow-5 = 0 19px 38px alpha($shadow-color, .30), 0 15px 12px alpha($shadow-color, .22)


$form-darker-color    ?= $grey-5
$form-lighter-color   ?= $grey-3
$form-active-color    ?= $primary

$form-border          ?= 3px solid $form-darker-color
$form-border-radius   ?= $generic-border-radius

$form-shadow          ?= 0 1px 3px 1px rgba(0, 0, 0, .4)

$input-padding-horizontal ?= .5rem
$input-padding-vertical   ?= .7rem

$backdrop-opacity           ?= .3
$backdrop-background-color  ?= rgba(0, 0, 0, $backdrop-opacity)

$layout-small-gutter  ?= .5rem
$layout-medium-gutter ?= 1rem
$layout-big-gutter    ?= 2.5rem
$layout-large-gutter  ?= 3.5rem

$layout-small  ?= 600px
$layout-medium ?= 920px
$layout-big    ?= 1280px




$layout-small-min = 0
$layout-small-max = $layout-small

$layout-medium-min = $layout-small-max + 1
$layout-medium-max = $layout-medium

$layout-big-min = $layout-medium-max + 1
$layout-big-max = $layout-big

$layout-large-min = $layout-big-max + 1
$layout-large-max = 9999px

active-color($color)
  if luminosity($color) > .29
    darken($color, 10%)
  else
    lighten($color, 30%)

hover-color($color)
  if luminosity($color) > .29
    darken($color, 15%)
  else
    lighten($color, 15%)

strong-active-color($color)
  if luminosity($color) > .29
    darken($color, 20%)
  else
    lighten($color, 80%)

opposite-non-color($color)
  if luminosity($color) > .29
    black
  else
    white

max(value1, value2)
  if value1 <= value2
    value2
  else
    value1

$dimmed-background-color       ?= rgba(0, 0, 0, .4)
$light-dimmed-background-color ?= rgba(255, 255, 255, .6)

$badge-padding-vertical   ?= .3rem
$badge-padding-horizontal ?= .7rem
$badge-border-radius      ?= $generic-border-radius

$breadcrumb-radius    ?= $generic-border-radius
$breadcrumb-height    ?= 34px
$breadcrumb-separator ?= 15px

$breadcrumb-primary   ?= $primary
$breadcrumb-secondary ?= lighten($breadcrumb-primary, 10%)

$breadcrumb-hover     ?= $tertiary
$breadcrumb-active    ?= darken($breadcrumb-hover, 15%)

$button-icon-margin         ?= .5rem

/*
 * Size small
 */
$button-small-font-size     ?= .8rem
$button-small-icon-size     ?= (1.5 * $button-small-font-size)
$button-small-padding       ?= 0 .8rem
$button-small-min-height    ?= 2rem
$button-small-circular-size ?= 37px

/*
 * Size default
 */
$button-font-size           ?= .9rem
$button-icon-size           ?= (1.5 * $button-font-size)
$button-padding             ?= 0 1rem
$button-min-height          ?= 2.4rem
$button-circular-size       ?= 56px

/*
 * Size big
 */
$button-big-font-size       ?= 1rem
$button-big-icon-size       ?= (1.3 * $button-big-font-size)
$button-big-padding         ?= 0 1.4rem
$button-big-min-height      ?= 3rem
$button-big-circular-size   ?= 72px

$card-box-shadow         ?= $shadow-1
$card-border-radius      ?= 2px
$card-padding-horizontal ?= 16px
$card-padding-vertical   ?= 13px

$chat-font-weight                    ?= 300
$chat-date-color                     ?= #a6a6a6
$chat-date-font-size                 ?= .8rem
$chat-message-font-size              ?= 1rem
$chat-message-you-color              ?= #fff
$chat-message-other-color            ?= #fff
$chat-message-you-background-color   ?= $primary
$chat-message-other-background-color ?= $secondary
$chat-box-shadow                     ?= 0 2px 6px rgba(0, 0, 0, .3)

$collapsible-border                   ?= 1px solid $grey-3
$collapsible-header-background-color  ?= white
$collapsible-content-background-color ?= white

$drawer-width                        ?= 250px
$drawer-font-size                    ?= 1em
$drawer-icon-font-size               ?= 1.8em
$drawer-background-color             ?= white

$dropdown-background-color ?= white
$dropdown-min-width        ?= 200px
$dropdown-max-height       ?= 450px
$dropdown-box-shadow       ?= $shadow-2

$icon-font-family    ?= 'Material Icons'
$icon-font-weight    ?= normal
$icon-font-style     ?= normal
$icon-text-transform ?= none
$icon-letter-spacing ?= normal

$label-margin             ?= 0 .2rem
$label-padding            ?= 3px 8px
$label-border             ?= 0 solid transparent
$label-background-color   ?= #e8e8e8
$label-color              ?= $primary

$progress-bar-track-color          ?= rgba(0, 0, 0, .15)
$progress-bar-track-desktop-height ?= 15px
$progress-bar-default-track-color  ?= $primary
$progress-bar-border-radius        ?= $generic-border-radius
$progress-bar-margin               ?= .5rem 0 1rem 0

$pull-to-refresh-color     ?= $primary
$pull-to-refresh-font-size ?= 1rem
$pull-to-refresh-icon-size ?= 2rem

$rating-grade-color        ?= $grey-6
$rating-active-grade-color ?= $yellow
$rating-shadow             ?= $shadow-1

$slider-min-height       ?= 200px
$slider-padding          ?= 2.3rem
$slider-arrow-size       ?= 2rem
$slider-ovelay-color     ?= rgba(0, 0, 0, .3)
$slider-opacity          ?= .6
$slider-opacity-active   ?= 1
$slider-button-size      ?= 1.5rem
$slider-dots-size        ?= .8rem

$table-border          ?= 1px solid #d0d0d0
$table-head-border     ?= 2px solid #d0d0d0
$table-highlight-color ?= #f2f2f2

$tooltip-color              ?= #fff
$tooltip-background-color   ?= #727272
$tooltip-width              ?= 160px
$tooltip-padding            ?= .5rem .75rem
$tooltip-font-size          ?= .85rem
$tooltip-line-height        ?= 1.5
$tooltip-arrow-border-width ?= 5px
$tooltip-border-radius      ?= $generic-border-radius

$tree-connector-color            ?= #ccc
$tree-label-padding              ?= 5px
$tree-label-border-radius        ?= $generic-border-radius
$tree-highlight-color            ?= inherit
$tree-highlight-background-color ?= $tree-connector-color

$theme = 'ios'

$generic-border-radius ?= 4px

$ios-primary   ?= #f8f8f8
$ios-secondary ?= #8c8c8c
$ios-tertiary  ?= #b2b2b2

$generic-input-size            ?= 30px
$generic-input-border-width    ?= 2px

$action-sheet-background-color ?= $ios-primary
$action-sheet-border-radius    ?= 13px
$action-sheet-max-width        ?= 95%
$action-sheet-margin-bottom    ?= .6rem
$action-sheet-font-size        ?= 1.5rem

$button-border-radius       ?= $generic-border-radius
$button-box-shadow          ?= none
$button-font-weight         ?= normal
$button-text-transform      ?= none
$button-margin              ?= .4rem .2rem

$checkbox-size           ?= $generic-input-size
$checkbox-border-radius  ?= 50%
$checkbox-border-width   ?= $generic-input-border-width
$checkbox-tick-thickness ?= 2px

$ios-drawer-shadow-left        ?= inset -4px 0 5px -2px rgba(0, 0, 0, .75)
$ios-drawer-padding-left       ?= 0 7px 0 0

$ios-drawer-shadow-right       ?= inset 4px 0 5px -2px rgba(0, 0, 0, .75)
$ios-drawer-padding-right      ?= 0 0 0 7px

input, textarea
  border-radius $generic-border-radius
  box-shadow $shadow-1
  &:focus
    box-shadow $shadow-2

.item
  &.floating-label, &.stacked-label
    input
      box-shadow none

$list-inset-margin            ?= 16px 16px 2rem 16px
$list-divider-color           ?= #d0d0d0
$list-stripe-color            ?= #f2f2f2

$list-header-color            ?= #858585
$list-header-background-color ?= #dedede
$list-header-font-size        ?= .8rem
$list-header-text-transform   ?= uppercase
$list-margin                  ?= .5rem 0 1rem 0

$item-font-size               ?= 1rem
$item-min-height              ?= max(50px, 15px + $generic-input-size)
$item-description-color       ?= #777
$item-margin                  ?= ($generic-input-size / 2)
$item-value-color             ?= #c5c5c5

$item-active-color            ?= opposite-non-color($primary)
$item-active-background-color ?= $primary

$modal-background-color  ?= $ios-primary
$modal-border-radius     ?= 13px

$modal-width             ?= 80vw
$modal-max-width         ?= 1000px

$modal-height            ?= 80vh
$modal-max-height        ?= 1000px

$modal-header-font-size  ?= 1.3rem
$modal-header-padding    ?= 20px 16px 7px
$modal-header-text-align ?= center
$modal-body-text-align   ?= center
$modal-body-color        ?= black
$modal-body-padding      ?= 0 16px 21px
$modal-scroll-size       ?= 240px
$modal-buttons-padding   ?= 0

.modal-buttons
  border-top 1px solid $form-darker-color
  button
    flex 1 1 auto
    font-size 110%
    margin 0
    padding 1rem 1rem
    &:last-child
      font-weight bold
    &:hover, &:active
      color white !important
      background-color rgba(0, 0, 0, .3) !important
  button + button
    border-left 1px solid $form-darker-color

.modal-controls + .modal-buttons
  border-top 0

$radio-size           ?= $generic-input-size
$radio-border-width   ?= $generic-input-border-width
$radio-picker-size    ?= 12px
$radio-tick-thickness ?= 2px

.quasar-radio
  display inline-block
  height ($radio-size + $radio-border-width)
  width ($radio-size + $radio-border-width)
  vertical-align middle

  input
    display none !important

  input + div
    position relative

    &:after
      content ''
      position absolute
      opacity 0
      top 0
      left ($radio-size / 3)
      width (.36 * $radio-size)
      height (.75 * $radio-size)
      border-top none
      border-left none
      border-right $radio-tick-thickness solid $form-active-color
      border-bottom $radio-tick-thickness solid $form-active-color
      transform rotate(45deg)
      transition all .3s ease

input:checked + div
  &:after
    opacity 1

$range-height              ?= 36px
$range-transition          ?= all .3s ease
$range-color               ?= white
$range-active-color        ?= white

$range-track-color         ?= $form-darker-color
$range-active-track-color  ?= $form-active-color
$range-track-height        ?= 2px

$range-thumb-size          ?= 24px
$range-active-thumb-size   ?= ($range-thumb-size + 7px)
$range-thumb-box-shadow    ?= 0 1px 3px 1px rgba(0, 0, 0, .4)
$range-thumb-radius        ?= 50%


$screen-marginals-background-color      ?= $ios-primary
$screen-marginals-color                 ?= black
$screen-marginals-font-size             ?= 1rem
$screen-marginals-font-weight           ?= normal
$screen-marginals-icon-button-font-size ?= (1.5 * $screen-marginals-font-size)
$screen-row-min-height                  ?= (3.5 * $screen-marginals-font-size)

/*
 * Specific
 */

$ios-screen-content-border           ?= 1px solid $ios-tertiary

$tabs-order             ?= 9
$tabs-padding           ?= 4px 20px 8px 20px
$tabs-color             ?= $ios-secondary
$tabs-active-color      ?= $primary
$tabs-background-color  ?= $screen-marginals-background-color
$tabs-highlight-color   ?= strong-active-color($tabs-background-color)

$tabs-icon-font-size    ?= (2.3 * $screen-marginals-font-size)
$tabs-font-weight       ?= $screen-marginals-font-weight
$tabs-label-margin      ?= 3px 0 0 0
$tabs-label-font-size   ?= (.7 * $screen-marginals-font-size)

$toggle-size           ?= $generic-input-size
$toggle-width-factor   ?= 1.5

$toggle-height          = $toggle-size
$toggle-width           = $toggle-width-factor * $toggle-size
$toggle-border-size     = 2px

$toggle-handle-size     = ($toggle-size - 3 * $toggle-border-size)
$toggle-handle-top      = $toggle-border-size
$toggle-handle-left     = $toggle-border-size

$toggle-area-width      = ($toggle-width - $toggle-border-size)
$toggle-area-height     = ($toggle-height - $toggle-border-size)
$toggle-area-left       = 0
$toggle-area-top        = 0
$toggle-area-active-left = ($toggle-width - $toggle-handle-size - 2 * $toggle-border-size)

.quasar-toggle
  input + div
    &:before
      border-radius $toggle-handle-size
      background-color white
      border $toggle-border-size solid $form-darker-color
    &:after
      box-shadow $form-shadow

  input:checked + div
    &:before
      background-color $form-active-color
      border $toggle-border-size solid $form-active-color

    &:after
      box-shadow $shadow-1

$typography-font-family     ?= '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
$typography-font-size       ?= 1rem
$typography-p-margin        ?= .5rem 0 1rem 0
$typography-p-line-height   ?= 1.4rem
