// Max width at which point
// current size ends
$breakpoint-xs ?= 575px
$breakpoint-sm ?= 767px
$breakpoint-md ?= 991px
$breakpoint-lg ?= 1199px

$flex-cols      ?= 12
$flex-gutter-xs ?= 8px
$flex-gutter-sm ?= 16px
$flex-gutter-md ?= 32px
$flex-gutter-lg ?= 48px
$flex-gutter-xl ?= 64px

$flex-gutter = {
  xs: $flex-gutter-xs,
  sm: $flex-gutter-sm,
  md: $flex-gutter-md,
  lg: $flex-gutter-lg,
  xl: $flex-gutter-xl
}
$sizes = {
  xs: 0,
  sm: $breakpoint-xs + 1, // Extra small screen / phone
  md: $breakpoint-sm + 1, // Small screen / phone
  lg: $breakpoint-md + 1, // Medium screen / tablet
  xl: $breakpoint-lg + 1  // Large screen / desktop
}

$breakpoint-xs-min = 0
$breakpoint-xs-max = $breakpoint-xs

$breakpoint-sm-min = $sizes[sm]
$breakpoint-sm-max = $breakpoint-sm

$breakpoint-md-min = $sizes[md]
$breakpoint-md-max = $breakpoint-md

$breakpoint-lg-min = $sizes[lg]
$breakpoint-lg-max = $breakpoint-lg

$breakpoint-xl-min = $sizes[xl]
$breakpoint-xl-max = 9999px

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

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

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

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

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

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

$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

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

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

dark-active-color($color)
  if luminosity($color) > .1
    darken($color, 20%)
  else
    lighten($color, 20%)


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%)

composite-color($color)
  if luminosity($color) > .29
    darken($color, 35%)
  else
    lighten($color, 65%)

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

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

$ios-statusbar-height ?= 20px

$z-side           ?= 1000
$z-marginals      ?= 2000
$z-fixed-side     ?= 3000
$z-fixed          ?= 4000
$z-fab            ?= 4100

$z-modal          ?= 5000
$z-popover        ?= 6000
$z-tooltip        ?= 7000
$z-toast          ?= 8000
$z-alert          ?= 8100

$z-body-dimmed    ?= 10000
$z-absolute       ?= 20000

$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

$elevation-umbra = rgba(black, .2)
$elevation-penumbra = rgba(black, .14)
$elevation-ambient = rgba(black, .12)

$shadow-0 = 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
$shadow-1 = 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient
$shadow-2 = 0 1px 5px $elevation-umbra, 0 2px 2px $elevation-penumbra, 0 3px 1px -2px $elevation-ambient
$shadow-3 = 0 1px 8px $elevation-umbra, 0 3px 4px $elevation-penumbra, 0 3px 3px -2px $elevation-ambient
$shadow-4 = 0 2px 4px -1px $elevation-umbra, 0 4px 5px $elevation-penumbra, 0 1px 10px $elevation-ambient
$shadow-5 = 0 3px 5px -1px $elevation-umbra, 0 5px 8px $elevation-penumbra, 0 1px 14px $elevation-ambient
$shadow-6 = 0 3px 5px -1px $elevation-umbra, 0 6px 10px $elevation-penumbra, 0 1px 18px $elevation-ambient
$shadow-7 = 0 4px 5px -2px $elevation-umbra, 0 7px 10px 1px $elevation-penumbra, 0 2px 16px 1px $elevation-ambient
$shadow-8 = 0 5px 5px -3px $elevation-umbra, 0 8px 10px 1px $elevation-penumbra, 0 3px 14px 2px $elevation-ambient
$shadow-9 = 0 5px 6px -3px $elevation-umbra, 0 9px 12px 1px $elevation-penumbra, 0 3px 16px 2px $elevation-ambient
$shadow-10 = 0 6px 6px -3px $elevation-umbra, 0 10px 14px 1px $elevation-penumbra, 0 4px 18px 3px $elevation-ambient
$shadow-11 = 0 6px 7px -4px $elevation-umbra, 0 11px 15px 1px $elevation-penumbra, 0 4px 20px 3px $elevation-ambient
$shadow-12 = 0 7px 8px -4px $elevation-umbra, 0 12px 17px 2px $elevation-penumbra, 0 5px 22px 4px $elevation-ambient
$shadow-13 = 0 7px 8px -4px $elevation-umbra, 0 13px 19px 2px $elevation-penumbra, 0 5px 24px 4px $elevation-ambient
$shadow-14 = 0 7px 9px -4px $elevation-umbra, 0 14px 21px 2px $elevation-penumbra, 0 5px 26px 4px $elevation-ambient
$shadow-15 = 0 8px 9px -5px $elevation-umbra, 0 15px 22px 2px $elevation-penumbra, 0 6px 28px 5px $elevation-ambient
$shadow-16 = 0 8px 10px -5px $elevation-umbra, 0 16px 24px 2px $elevation-penumbra, 0 6px 30px 5px $elevation-ambient
$shadow-17 = 0 8px 11px -5px $elevation-umbra, 0 17px 26px 2px $elevation-penumbra, 0 6px 32px 5px $elevation-ambient
$shadow-18 = 0 9px 11px -5px $elevation-umbra, 0 18px 28px 2px $elevation-penumbra, 0 7px 34px 6px $elevation-ambient
$shadow-19 = 0 9px 12px -6px $elevation-umbra, 0 19px 29px 2px $elevation-penumbra, 0 7px 36px 6px $elevation-ambient
$shadow-20 = 0 10px 13px -6px $elevation-umbra, 0 20px 31px 3px $elevation-penumbra, 0 8px 38px 7px $elevation-ambient
$shadow-21 = 0 10px 13px -6px $elevation-umbra, 0 21px 33px 3px $elevation-penumbra, 0 8px 40px 7px $elevation-ambient
$shadow-22 = 0 10px 14px -6px $elevation-umbra, 0 22px 35px 3px $elevation-penumbra, 0 8px 42px 7px $elevation-ambient
$shadow-23 = 0 11px 14px -7px $elevation-umbra, 0 23px 36px 3px $elevation-penumbra, 0 9px 44px 8px $elevation-ambient
$shadow-24 = 0 11px 15px -7px $elevation-umbra, 0 24px 38px 3px $elevation-penumbra, 0 9px 46px 8px $elevation-ambient

$shadow-up-0 = 0 0 0 $elevation-umbra, 0 0 0 $elevation-penumbra, 0 0 0 $elevation-ambient
$shadow-up-1 = 0 -1px 3px $elevation-umbra, 0 -1px 1px $elevation-penumbra, 0 -2px 1px -1px $elevation-ambient
$shadow-up-2 = 0 -1px 5px $elevation-umbra, 0 -2px 2px $elevation-penumbra, 0 -3px 1px -2px $elevation-ambient
$shadow-up-3 = 0 -1px 8px $elevation-umbra, 0 -3px 4px $elevation-penumbra, 0 -3px 3px -2px $elevation-ambient
$shadow-up-4 = 0 -2px 4px -1px $elevation-umbra, 0 -4px 5px $elevation-penumbra, 0 -1px 10px $elevation-ambient
$shadow-up-5 = 0 -3px 5px -1px $elevation-umbra, 0 -5px 8px $elevation-penumbra, 0 -1px 14px $elevation-ambient
$shadow-up-6 = 0 -3px 5px -1px $elevation-umbra, 0 -6px 10px $elevation-penumbra, 0 -1px 18px $elevation-ambient
$shadow-up-7 = 0 -4px 5px -2px $elevation-umbra, 0 -7px 10px 1px $elevation-penumbra, 0 -2px 16px 1px $elevation-ambient
$shadow-up-8 = 0 -5px 5px -3px $elevation-umbra, 0 -8px 10px 1px $elevation-penumbra, 0 -3px 14px 2px $elevation-ambient
$shadow-up-9 = 0 -5px 6px -3px $elevation-umbra, 0 -9px 12px 1px $elevation-penumbra, 0 -3px 16px 2px $elevation-ambient
$shadow-up-10 = 0 -6px 6px -3px $elevation-umbra, 0 -10px 14px 1px $elevation-penumbra, 0 -4px 18px 3px $elevation-ambient
$shadow-up-11 = 0 -6px 7px -4px $elevation-umbra, 0 -11px 15px 1px $elevation-penumbra, 0 -4px 20px 3px $elevation-ambient
$shadow-up-12 = 0 -7px 8px -4px $elevation-umbra, 0 -12px 17px 2px $elevation-penumbra, 0 -5px 22px 4px $elevation-ambient
$shadow-up-13 = 0 -7px 8px -4px $elevation-umbra, 0 -13px 19px 2px $elevation-penumbra, 0 -5px 24px 4px $elevation-ambient
$shadow-up-14 = 0 -7px 9px -4px $elevation-umbra, 0 -14px 21px 2px $elevation-penumbra, 0 -5px 26px 4px $elevation-ambient
$shadow-up-15 = 0 -8px 9px -5px $elevation-umbra, 0 -15px 22px 2px $elevation-penumbra, 0 -6px 28px 5px $elevation-ambient
$shadow-up-16 = 0 -8px 10px -5px $elevation-umbra, 0 -16px 24px 2px $elevation-penumbra, 0 -6px 30px 5px $elevation-ambient
$shadow-up-17 = 0 -8px 11px -5px $elevation-umbra, 0 -17px 26px 2px $elevation-penumbra, 0 -6px 32px 5px $elevation-ambient
$shadow-up-18 = 0 -9px 11px -5px $elevation-umbra, 0 -18px 28px 2px $elevation-penumbra, 0 -7px 34px 6px $elevation-ambient
$shadow-up-19 = 0 -9px 12px -6px $elevation-umbra, 0 -19px 29px 2px $elevation-penumbra, 0 -7px 36px 6px $elevation-ambient
$shadow-up-20 = 0 -10px 13px -6px $elevation-umbra, 0 -20px 31px 3px $elevation-penumbra, 0 -8px 38px 7px $elevation-ambient
$shadow-up-21 = 0 -10px 13px -6px $elevation-umbra, 0 -21px 33px 3px $elevation-penumbra, 0 -8px 40px 7px $elevation-ambient
$shadow-up-22 = 0 -10px 14px -6px $elevation-umbra, 0 -22px 35px 3px $elevation-penumbra, 0 -8px 42px 7px $elevation-ambient
$shadow-up-23 = 0 -11px 14px -7px $elevation-umbra, 0 -23px 36px 3px $elevation-penumbra, 0 -9px 44px 8px $elevation-ambient
$shadow-up-24 = 0 -11px 15px -7px $elevation-umbra, 0 -24px 38px 3px $elevation-penumbra, 0 -9px 46px 8px $elevation-ambient


$generic-border-radius      ?= 4px
$typography-font-family     ?= '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif

$action-sheet-background       ?= $light
$action-sheet-border-radius    ?= 13px
$action-sheet-max-width        ?= 95%
$action-sheet-margin-bottom    ?= .6rem
$action-sheet-font-size        ?= 1.3rem
$action-sheet-avatar-padding   ?= .6rem 1.1rem
$action-sheet-hover-background ?= #d0d0d0

$alert-padding        ?= .7rem
$alert-color          ?= white
$alert-background     ?= $negative
$alert-border-radius  ?= $generic-border-radius
$alert-min-width      ?= 200px

$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-border-radius  ?= $generic-border-radius
$button-padding        ?= 0 16px
$button-transition     ?= .12s ease-in
$button-small          ?= 28px
$button-standard       ?= 36px
$button-big            ?= 44px
$button-round-small    ?= 40px
$button-round-standard ?= 56px
$button-round-big      ?= 72px
$button-sizes = {
  small: $button-small,
  standard: $button-standard,
  big: $button-big
}
$button-round-sizes = {
  small: $button-round-small,
  standard: $button-round-standard,
  big: $button-round-big
}

$card-faded-color          ?= rgba(0, 0, 0, .4)
$card-separator-color      ?= rgba(0, 0, 0, .1)
$card-overlay-color        ?= rgba(0, 0, 0, .47)
$card-shadow               ?= $shadow-2
$card-dark-faded-color     ?= rgba(255, 255, 255, .6)
$card-dark-separator-color ?= rgba(255, 255, 255, .2)

$chat-message-received-color     ?= black
$chat-message-received-bg        ?= $green-4
$chat-message-sent-color         ?= black
$chat-message-sent-bg            ?= $grey-4
$chat-message-avatar-size        ?= 48px
$chat-message-border-radius      ?= 20px
$chat-message-distance           ?= 8px
$chat-message-text-padding-vert  ?= 9px
$chat-message-text-padding-horiz ?= 11px

$chip-border             ?= #e0e0e0
$chip-border-radius      ?= 2rem
$chip-font-size          ?= 14px
$chip-padding-horizontal ?= 0
$chip-padding-vertical   ?= 12px
$chip-height             ?= 32px
$chip-icon-size          ?= 24px
$chip-small-height       ?= 26px
$chip-color              ?= black
$chip-background         ?= $light

$item-dense-factor                 ?= .2
$item-sparse-factor                ?= 1.4
$item-base-color                   ?= $grey-5
$item-highlight-color              ?= alpha($item-base-color, 50%)
$item-stripe-color                 ?= alpha($item-base-color, 65%)
$item-active-color                 ?= alpha($item-base-color, 40%)
$item-primary-color                ?= rgba(0, 0, 0, .54)
$item-secondary-color              ?= $item-primary-color
$item-label-color                  ?= $grey-7
$item-content-secondary-text-color ?= $grey-7
$item-separator-color              ?= rgb(224, 224, 224)
$item-min-height                   ?= 40px
$item-padding                      ?= 16px
$item-gutter                       ?= 10px
$item-primary-size                 ?= 38px
$item-inverted-icon-size           ?= round($item-primary-size * .52)
$item-icon-size                    ?= round($item-primary-size * .63)
$item-image-size                   ?= round(3 * $item-primary-size)
$item-font-size                    ?= 1rem
$item-stamp-font-size              ?= .8rem

$collapsible-padding             ?= 8px 16px
$collapsible-indent-left-padding ?= ($item-primary-size + $item-gutter)
$collapsible-active-color        ?= $item-active-color

$datatable-border    ?= 1px solid $grey-4
$datatable-font-size ?= 85%

$datetime-range-space    ?= 10px
$datetime-input-min-width ?= 70px

$dot-color             ?= $red
$dot-opacity           ?= .8
$dot-size              ?= 10px
$dot-position-top      ?= 10px
$dot-position-right    ?= 10px

$fab-margin    ?= 5px

$field-icon-size   ?= 28px
$field-label-color ?= rgba(0, 0, 0, .54)

$table-stripe-color          ?= rgba(0, 0, 0, .07)
$table-highlight-color       ?= rgba(0, 0, 0, .14)
$table-border                ?= 1px solid rgba(0, 0, 0, .12)

$input-frame-transition ?= all .45s cubic-bezier(.23, 1, .32, 1)

$toolbar-color              ?= white
$toolbar-background         ?= $primary
$toolbar-min-height         ?= 50px
$toolbar-padding            ?= 4px 10px
$toolbar-title-font-size    ?= 16px
$toolbar-subtitle-font-size ?= 12px
$toolbar-title-font-weight  ?= 600
$toolbar-title-padding      ?= 0 5px

$layout-aside-background   ?= white
$layout-aside-left-width   ?= 280px
$layout-aside-right-width  ?= 280px
$layout-border-color       ?= $grey-5
$layout-border             ?= 1px solid $layout-border-color

$loading-background ?= $dimmed-background

$modal-background        ?= white
$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-slim-body-padding ?= 0 16px 16px 16px
$modal-scroll-size       ?= 240px
$modal-buttons-padding   ?= 0
$modal-border-radius     ?= 13px

$label-offset ?= 8px

$paralax-text-shadow ?= 0 0 5px white

$popover-background   ?= white
$popover-box-shadow   ?= $shadow-24
$popover-max-width    ?= 100vw

$progress-track-height         ?= 5px
$progress-track-color          ?= currentColor
$progress-color                ?= $primary
$progress-track-opacity        ?= .2
$progress-transition           ?= width .3s linear

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

$rating-grade-color     ?= $yellow
$rating-shadow          ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)

$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        ?= .9rem

$stepper-color                 ?= $primary
$stepper-divider-color         ?= rgba(0, 0, 0, .12)
$stepper-label-color           ?= rgba(0, 0, 0, .56)
$stepper-label-inactive-color  ?= rgba(0, 0, 0, .42)
$stepper-hover-background      ?= rgba(0, 0, 0, .05)
$stepper-active-background     ?= rgba(0, 0, 0, .17)
$stepper-pane-padding          ?= 16px
$stepper-border-radius         ?= $generic-border-radius

$tabs-padding                  ?= 12px 12px
$tabs-padding-with-icon        ?= 6px 10px
$tabs-big-screen-horiz-padding ?= 25px
$tabs-min-height               ?= 50px
$tabs-min-height-with-icon     ?= 62px
$tabs-big-screen-side-padding  ?= 12px
$tabs-pane-padding             ?= 12px
$tabs-color                    ?= $toolbar-color
$tabs-background               ?= $toolbar-background
$tabs-inverted-color           ?= $grey-6
$tabs-pane-border              ?= 1px solid rgba(0, 0, 0, .1)
$tabs-unselected-opacity       ?= .6
$tabs-font-size                ?= .9rem
$tabs-icon-font-size           ?= 24px
$tabs-font-weight              ?= 400
$tabs-text-transform           ?= uppercase

$tooltip-color         ?= black
$tooltip-background    ?= white
$tooltip-box-shadow    ?= $shadow-6
$tooltip-padding       ?= 10px
$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       ?= $tree-connector-color
$tree-label-icon-font-size       ?= 1.3rem


.s-if, .s-if:before, .s-if:after, .s-if-label, .s-if-addon, .s-field-icon, .s-field-label, .s-if-control, .s-field-bottom
  transition $input-frame-transition

.s-if
  font-size 16px
  min-height 32px
  margin-top 16px
  margin-bottom 8px
  padding-bottom 8px
  color $primary

  /* Remove browser controller for input type="number" */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button // @stylint ignore
    -webkit-appearance none

  &:before, &:after
    content ''
    position absolute
    bottom 0
    left 0
    right 0
    background currentColor
  &:before
    height 1px
    color rgba(0, 0, 0, .12)
    transform scaleY(1)
  &:after
    width 0
    height 2px
    color currentColor

  &:hover:before
    color rgba(0, 0, 0, .36)

  .group
    margin -5px

.s-if-focusable
  outline 0
  cursor pointer

.s-if-inner
  min-height 24px !important

.s-if-has-label
  min-height 41px
  .s-if-inner
    min-height 34px !important
    padding-top 15px

.s-if-label
  color rgba(0, 0, 0, .46)
  pointer-events none
  user-select none
  top 15px
  left 0
  right 0
  transform-origin left top 0
  transform scale(1) translate(0, 0)
.s-if-label-above
  transform scale(.75) translate(0, -22px)

.s-if-addon
  pointer-events none
  color rgba(0, 0, 0, .46)
  opacity 0
.s-if-addon-left
  padding-right 8px
.s-if-addon-right
  padding-left 8px
.s-if-addon-visible
  opacity 1

.s-if-control
  cursor pointer
  margin-left 8px
  color rgba(0, 0, 0, .54)
  font-size 24px
  &:hover
    opacity .7
.s-if-control-before
  margin-left 0
  margin-right 8px

.s-if-dark
  &:before, .s-if-label, .s-if-control
    color rgba(255, 255, 255, .7)
  &:hover:before, .s-if-addon
    color rgba(255, 255, 255, .9)

.s-if-focused
  &:after
    width 100%
  .s-if-label
    color currentColor

.s-if-inverted
  min-height 38px
  border-radius 2px
  padding-top 8px
  box-shadow $shadow-1
  &:before, &:after
    display none
  .s-if-control
    color white
  .s-if-control, .s-if-inner
    margin-left 8px
    margin-right 8px

.s-if-error
  &:before, &:after, &:not(.s-if-inverted) .s-if-label, .s-if-addon
    color #DB2828
  &:hover:before
    color lighten(#DB2828, 26%)

.s-if-disabled
  cursor not-allowed !important
  .s-if-label, .s-if-control
    opacity .6
    cursor not-allowed !important
  &:before
    background-image linear-gradient(90deg, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .38) 33%, transparent 0)
    background-color transparent
    background-position bottom
    background-size 3px 1px
    background-repeat repeat-x

.s-field
  margin-top 16px
  margin-bottom 8px
  .s-if
    margin-top 0 !important
    margin-bottom 0 !important

.s-field-icon
  width $field-icon-size
  height $field-icon-size
  min-width $field-icon-size
  font-size $field-icon-size
  margin-right 16px
  color $field-label-color

.s-field-label
  padding-right 8px
  color $field-label-color
.s-field-label-inner
  min-height $field-icon-size
.s-field-label-hint
  padding-left 8px

.s-field-bottom
  font-size 12px
  padding-top 2px
  color rgba(0, 0, 0, .46)
.s-field-no-input
  margin-top 8px
  border-top 1px solid rgba(0, 0, 0, .12)
.s-field-counter
  color $field-label-color
  padding-left 8px

.s-field-dark
  .s-field-label, .s-field-icon, .s-field-counter, .s-field-bottom
    color rgba(255, 255, 255, 60%)
  .s-field-no-input
    border-top 1px solid rgba(255, 255, 255, .7)

.s-field-with-error
  .s-field-icon, .s-field-label, .s-field-bottom
    color $negative
  .s-field-no-input
    border-top 1px solid $negative

@media (max-width $breakpoint-xs-max)
  .s-field-label + .s-field-content
    padding-top 8px
  .s-field-floating.s-field-no-label
    .s-field-margin
      margin-top 12px
  .s-field-no-label .s-field-label
    display none

@media (min-width $breakpoint-sm-min)
  .s-field-floating
    .s-field-margin
      margin-top 12px
  .s-field-label + .s-field-content
    padding-top 0

@-webkit-keyframes autofill
  to
    background transparent

.s-input-target::-webkit-outer-spin-button,
.s-input-target::-webkit-inner-spin-button
  -webkit-appearance none

.s-input-target, .s-input-shadow
  border 0
  outline 0
  padding 0
  color black
  background transparent
  min-height 18px
  font-size inherit
  overflow hidden
  resize none
  display flex
  align-items center
  &:-webkit-autofill
    -webkit-animation-name autofill
    -webkit-animation-fill-mode both
  &::-ms-clear, &::-ms-reveal
    display none
    width 0
    height 0

input.s-input-target
  height 18px
  outline 0
.s-input-chips
  min-height 36px !important

.s-if-dark .s-input-target
  color white

  &::-webkit-input-placeholder /* Chrome/Opera/Safari */
    color rgba(255, 255, 255, .6) !important
  &::-moz-placeholder /* Firefox 19+ */
    color rgba(255, 255, 255, .6) !important
  &:-ms-input-placeholder /* IE 10+ */
    color rgba(255, 255, 255, .6) !important

  &::selection
    background white
    color black

.s-input-shadow
  overflow hidden
  visibility hidden
  pointer-events none
  height auto

.s-datetime-input
  min-width $datetime-input-min-width

.s-datetime
  max-width 100vw
  border 1px solid $grey-4
  display inline-block

  &.type-date
    width 320px
  &.type-time
    width 250px
  &.type-datetime
    width 320px

.s-datetime-content
  height 200px
  position relative

.s-datetime-inner
  font-size 21px
  overflow hidden
  perspective 1200px
  height 100%
  text-align right
  position relative
  padding 0

.s-datetime-col
  display block
  overflow visible
  transform-style preserve-3d
  position relative
  max-height 100%

.s-datetime-col-wrapper, .s-datetime-item
  transform-style preserve-3d
  transition all .2s ease-out

body.desktop .s-datetime-col-wrapper
  cursor pointer

.s-datetime-col-divider
  max-height 100%
  width 10px

.s-datetime-col-month
  width 117px
  text-align left
.s-datetime-col-day
  width 37px
.s-datetime-col-year
  width 61px
.s-datetime-col-hour
  width 37px
.s-datetime-col-minute
  width 37px

.s-datetime-item
  font-size 85%
  height 36px
  line-height 36px
  color rgba(0, 0, 0, .87)
  position absolute
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  left 0
  top 0
  width 100%
  backface-visibility hidden
  transform-origin center center -110px

.s-datetime-mask
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  height 100%
  width 100%
  background linear-gradient(to top, white, transparent 50%, white)
  pointer-events none

.s-datetime-highlight
  height 36px
  position absolute
  left 0
  right 0
  width 100%
  top 50%
  margin-top -18px
  pointer-events none
  border-top 1px solid $grey-5
  border-bottom 1px solid $grey-5

.s-datetime-range
  &.row
    .s-datetime-range-left
      border-top-right-radius 0
      border-bottom-right-radius 0
    .s-datetime-range-right
      border-top-left-radius 0
      border-bottom-left-radius 0
  &.column > div + div
    margin-top $datetime-range-space

button-round-factor($size)
  if $size == 'small'
    .54
  else
    .47

.s-btn
  display inline-flex
  align-items center
  justify-content center
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  -webkit-appearance button
  padding $button-padding
  text-decoration none
  color inherit
  background transparent
  transition $button-transition

  &.disabled
    opacity .7 !important
  &.full-width
    border-radius 0 !important
    white-space normal

.s-btn-progress
  transition all .3s
  height 100%
  background rgba(255, 255, 255, .25)
  &.s-btn-dark-progress
    background rgba(0, 0, 0, .2)

.s-btn-rectangle
  border-radius $button-border-radius

.s-btn-outline
  border 1px solid currentColor
  background transparent !important

.s-btn-push
  border-bottom 3px solid rgba(0, 0, 0, .15)
  border-radius 7px
  &:active:not(.disabled)
    border-bottom 0

.s-btn-rounded
  border-radius 28px

.s-btn-round
  border-radius 50%
  padding 0

for $name, $size in $button-sizes
  .s-btn-{$name}
    min-height $size
    font-size round($size * .38)
    .s-icon
      font-size round($size * .68)
    .s-spinner
      height round($size * .68)
      width round($size * .68)
for $name, $size in $button-round-sizes
  .s-btn-round.s-btn-{$name}
    height $size
    width $size
    .s-icon, .s-spinner
      height round(button-round-factor($name) * $size)
      width round(button-round-factor($name) * $size)
      font-size round(button-round-factor($name) * $size)

$toggle-width           = 42px
$toggle-height          = 24px
$toggle-span            = 2px
$toggle-handle-size     = $toggle-height - 2 * $toggle-span

.s-toggle-base
  transition all .45s cubic-bezier(.23, 1, .32, 1)
  width 100%
  height $toggle-height
  color white
  background-color currentColor
  border-radius 16px
  border 2px solid $grey-3

.s-toggle-handle
  background-color white
  border 1px solid $grey-3
  transition all 450ms cubic-bezier(.23, 1, .32, 1)
  border-radius 50%
  position absolute
  top $toggle-span
  left $toggle-span
  width $toggle-handle-size
  height $toggle-handle-size
  line-height $toggle-handle-size

.s-toggle .s-option-inner
  height $toggle-height
  width $toggle-width
  min-width $toggle-width
  &.active
    .s-toggle-base
      color currentColor
      border 0
    .s-toggle-handle
      left ($toggle-width - $toggle-handle-size - $toggle-span)

.s-card
  border-radius 2px
  box-shadow $card-shadow
  margin 8px
  vertical-align top

  > div:first-child
    border-top-left-radius inherit
    border-top-right-radius inherit
  > div:last-child
    border-bottom-left-radius inherit
    border-bottom-right-radius inherit

  > .s-list
    border 0

.s-card-separator
  background $card-separator-color
  height 1px
  &.inset
    margin 0 16px

.s-card-container
  padding 0px 0px 16px 16px

.s-card-title
  font-size 18px
  font-weight 400
  letter-spacing normal
  line-height 2rem
  &:empty
    display none
.s-card-subtitle, .s-card-title-extra
  font-size 14px
  color $card-faded-color
  .s-icon
    font-size 24px

.s-card-top-right
  font-size 14px
  color $card-faded-color
  float right
  width 100%

.s-card-main
  font-size 14px
.s-card-primary + .s-card-main
  padding-top 0

.s-card-actions
  padding 8px
  .s-btn
    padding 0 8px
.s-card-actions-horiz
  .s-btn + .s-btn
    margin-left 8px
.s-card-actions-vert
  .s-btn + .s-btn
    margin-top 4px

.s-card-media
  overflow hidden
  > img
    display block
    width 100%
    max-width 100%
    border 0
.s-card-media-overlay
  color white
  background $card-overlay-color
  .s-card-subtitle
    color white

.s-card-dark
  .s-card-separator
    background $card-dark-separator-color
  .s-card-subtitle, .s-card-title-extra
    color $card-dark-faded-color

.s-item-stamp
  font-size $item-stamp-font-size
  line-height $item-stamp-font-size
  white-space nowrap
  margin .3rem 0

.s-item-side-right
  text-align right
  color $item-secondary-color
  display flex
  flex-direction column
  align-items flex-end

.s-item-side
  color $item-primary-color
  min-width $item-primary-size
.s-item-avatar, .s-item-avatar img
  width $item-primary-size
  height $item-primary-size
  border-radius 50%

.s-item-letter, .s-item-icon
  font-size $item-icon-size
.s-item-icon-inverted
  border-radius 50%
  font-size $item-inverted-icon-size
  color white
  background $primary
  padding 9px

.s-item-main
  flex 1 1 auto
  min-width 0
.s-item-main-inset
  margin-left ($item-gutter + $item-primary-size)

.s-item-label > span
  color $item-content-secondary-text-color
.s-item-sublabel
  color $item-content-secondary-text-color
  font-size 90%
  margin-top .2rem
  > span
    font-weight 500

.s-item-section + .s-item-section
  margin-left $item-gutter

.s-item
  position relative
  display flex
  align-items center
  font-size $item-font-size
  text-align left

  padding ($item-padding / 2) $item-padding
  min-height $item-min-height

  &.active, &.router-link-active, &:focus
    background $item-active-color

  &:focus
    outline 0

.s-item-image
  min-width $item-image-size
  max-width $item-image-size
  max-height $item-image-size

.s-list-multiline > .s-item, .s-item-multiline
  align-items flex-start

.s-list-link > .s-item, .s-item-link
  cursor pointer

.s-list-highlight > .s-item, .s-item-highlight,
.s-list-link > .s-item, .s-item-link
  &:hover
    background $item-highlight-color

.s-list-separator > .s-item-division + .s-item-division, .s-item-division + .s-item-separator
  border-top 1px solid $item-separator-color
.s-list-inset-separator > .s-item-division + .s-item-division, .s-item-division + .s-item-inset-separator
  &:after
    content ''
    position absolute
    top 0
    right 0
    left ($item-padding + $item-gutter + $item-primary-size)
    height 1px
    background $item-separator-color

.s-list-dense > .s-item, .s-item-dense
  padding round($item-padding * $item-dense-factor) $item-padding
  min-height round($item-min-height * $item-dense-factor)
.s-list-sparse > .s-item, .s-item-sparse
  padding ($item-padding * $item-sparse-factor) $item-padding
  min-height ($item-min-height * $item-sparse-factor)

.s-list-striped .s-item:nth-child(even)
  background-color $item-stripe-color
.s-list-striped-odd .s-item:nth-child(odd)
  background-color $item-stripe-color

.s-list
  border 1px solid $item-separator-color
  padding ($item-padding / 2) 0

  & + .s-list
    margin-top 32px

.s-item-separator-component
  margin ($item-padding / 2) 0
  height 1px
  border 0
  background-color $item-separator-color
  &:last-child
    display none
  & + .s-list-header
    margin-top (- $item-padding / 2)
.s-item-separator-inset-component
  margin-left ($item-padding + $item-gutter + $item-primary-size)

.s-list-header
  color $item-label-color
  font-size 14px
  font-weight 500
  line-height 48px
  padding-left $item-padding
.s-list-header-inset
  padding-left ($item-padding + $item-gutter + $item-primary-size)

.s-chip
  height $chip-height
  padding $chip-padding-horizontal $chip-padding-vertical
  font-size $chip-font-size
  border $chip-border
  border-radius $chip-border-radius
  cursor default
  white-space nowrap
  vertical-align middle
  color $chip-color
  background $chip-background

  .s-icon
    font-size $chip-icon-size
    line-height 1

  .s-chip-side
    border-radius 50%
    height $chip-height
    width $chip-height
    min-width $chip-height
    overflow hidden

    img
      width 100%
      height 100%

    &.chip-left
      margin-left -12px
      margin-right 8px
    &.chip-right
      margin-left 2px
      margin-right -12px

  &.square
    border-radius 2px

  &.floating
    position absolute
    top -.7rem
    left 100%
    margin 0 0 0 -1.5rem !important
    pointer-events none

  &.tag
    position relative
    padding-left 1.7rem
    &:after
      content ''
      position absolute
      top 50%
      left .5rem
      margin-top -.25rem
      background white
      width .5rem
      height .5rem
      box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
      border-radius 50%

  &.pointing
    position relative
    &:before
      content ''
      z-index -1
      background inherit
      width 16px
      height 16px
      position absolute
  &.pointing-up
    margin-top .8rem
    &:before
      top 0
      left 50%
      transform translateX(-50%) translateY(-22%) rotate(45deg)
  &.pointing-down
    margin-bottom .8rem
    &:before
      right auto
      top 100%
      left 50%
      transform translateX(-50%) translateY(-78%) rotate(45deg)
  &.pointing-right
    margin-right .8rem
    &:before
      top 50%
      right 2px
      bottom auto
      left auto
      transform translateX(33%) translateY(-50%) rotate(45deg)
  &.pointing-left
    margin-left .8rem
    &:before
      top 50%
      left 2px
      bottom auto
      right auto
      transform translateX(-33%) translateY(-50%) rotate(45deg)

  .chip-detail
    background rgba(0, 0, 0, .1)
    opacity .8
    padding 0 5px
    border-top-right-radius 0
    border-bottom-right-radius 0

  &.small
    height $chip-small-height

    .s-chip-side
      height $chip-small-height
      width $chip-small-height
      min-width $chip-small-height

.s-tabs
  flex-direction column

.s-tabs-scroller
  overflow hidden
  color $tabs-color

.s-tab-pane
  padding $tabs-pane-padding
  border $tabs-pane-border

.s-tabs-no-pane-border .s-tab-pane
  border 0

.s-tabs-panes:empty
  display none

.s-tab-icon, .s-tab-label
  opacity $tabs-unselected-opacity

.s-tab
  cursor pointer
  transition color .3s, background .3s
  white-space nowrap
  user-select none
  padding $tabs-padding
  min-height $tabs-min-height
  text-transform $tabs-text-transform

  > .s-icon, .s-tab-label
    transition transform .2s
  > .s-icon + .s-tab-label
    margin-top 7px
  .s-tab-label
    text-align center

  &.icon-and-label
    padding $tabs-padding-with-icon
    min-height $tabs-min-height-with-icon

  .s-tab-icon
    font-size $tabs-icon-font-size

  .s-chip
    top 5px
    right 0
    left initial
    color white
    background alpha($dot-color, .75)

  &.active
    > .s-icon, .s-tab-label
      transform scale(1.1)
    .s-tab-icon, .s-tab-label
      opacity 1
  &:active
    background rgba(255, 255, 255, .3)

@media (max-width $breakpoint-sm-max)
  .s-tab
    &.hide-icon .s-tab-icon,
    &.hide-label .s-tab-label
      display none !important

@media (max-width $breakpoint-md-max)
  .s-tabs-head:not(.scrollable)
    .s-tabs-scroller, .s-tab
      flex 1 1 auto

@media (min-width $breakpoint-lg-min)
  .s-tab, .s-tab.icon-and-label
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .s-tabs-head:not(.scrollable)
    padding-left $tabs-big-screen-side-padding
    padding-right $tabs-big-screen-side-padding

.s-tabs-head
  min-height $tabs-min-height
  overflow hidden
  background $tabs-background
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in
  position relative

  &:not(.scrollable)
    .s-tabs-left-scroll, .s-tabs-right-scroll
      display none !important

.s-tabs-left-scroll, .s-tabs-right-scroll
  position absolute
  height 100%
  cursor pointer
  color white
  .s-icon
    text-shadow 0 0 10px black
    font-size (1.2 * $tabs-icon-font-size)
    visibility hidden
  &:hover .s-icon
    visibility visible
  &.disabled
    display none

.s-tabs-left-scroll
  left 0
  background linear-gradient(to left, transparent, rgba(255, 255, 255, .5))
.s-tabs-right-scroll
  right 0
  background linear-gradient(to right, transparent, rgba(255, 255, 255, .5))

.s-tabs-align-justify
  .s-tabs-scroller, .s-tab
    flex 1 1 auto
.s-tabs-align-center
  justify-content center
.s-tabs-align-right
  justify-content flex-end

.s-tabs-two-lines .s-tab
  white-space normal
  .s-tab-label
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2

.s-tabs-position-bottom .s-tabs-panes
  order -1

.s-tabs-inverted
  .s-tab
    color $tabs-inverted-color
    &.active
      color $tabs-background
    &:active
      background rgba(0, 0, 0, .1)

  .s-tabs-scroller
    color $tabs-background

  .s-tabs-left-scroll
    background linear-gradient(to left, transparent, rgba(0, 0, 0, .1))
  .s-tabs-right-scroll
    background linear-gradient(to right, transparent, rgba(0, 0, 0, .1))

  .s-tabs-head
    background transparent

  &.s-tabs-position-top
    .s-tabs-panes
      border-top $tabs-pane-border
    .s-tab-pane
      border-top 0

  &.s-tabs-position-bottom
    .s-tabs-panes
      border-bottom $tabs-pane-border
    .s-tab-pane
      border-bottom 0

body.mobile .s-tabs-scroller
  overflow-y hidden
  overflow-x auto
  will-change scroll-position
  -webkit-overflow-scrolling touch

.layout
  width 100%
  min-height 100vh

.layout-header
  border-bottom $layout-border

.layout-footer
  border-top $layout-border

.layout-aside
  position absolute
  top 0
  bottom 0
  background $layout-aside-background
  &.fixed
    z-index $z-side
  &.on-top
    z-index $z-fixed-side
.layout-aside-left
  left 0
  width $layout-aside-left-width
  &.fixed
    border-right $layout-border
.layout-aside-right
  right 0
  width $layout-aside-right-width
  &.fixed
    border-left $layout-border

/* main, .layout, .layout-header, .layout-footer
  position relative */

.layout-header, .layout-footer
  color $toolbar-color
  background $toolbar-background
  z-index $z-marginals

.layout-backdrop
  z-index ($z-fixed-side - 1)
  background $dimmed-background

.layout-side-opener
  z-index ($z-marginals + 1)
  height 100vh
  width 15px

body.with-layout-side-opened
  overflow hidden

body
  &.cordova.platform-ios, &.demo-site.within-iframe
    .layout-header > .s-toolbar:first-child, .layout-aside.top-padding
      padding-top $ios-statusbar-height
      min-height ($toolbar-min-height + $ios-statusbar-height)

.layout-padding
  @media (max-width $breakpoint-sm-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
    padding 1.5rem 2rem
    margin auto
    &.horizontal
      padding 0 2rem
  @media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
    padding 2.5rem 3rem
    margin auto
    &.horizontal
      padding 0 3rem
  @media (min-width $breakpoint-xl-min)
    padding 3rem 4rem
    margin auto
    &.horizontal
      padding 0 4rem

.s-scrollarea-thumb
  background black
  width 10px
  right 0
  opacity .2
  transition opacity .3s
  &.invisible-thumb
    opacity 0 !important

.s-toolbar
  padding $toolbar-padding
  min-height $toolbar-min-height
  overflow hidden
  width 100%
  color $toolbar-color
  background $toolbar-background

  > .s-btn
    margin 0 .2rem
    padding .2rem
    &:first-child
      margin-left 0
    &:last-child
      margin-right 0

.s-toolbar-inverted
  color $toolbar-background
  background transparent

.s-toolbar-title
  flex 1
  min-width 1px
  max-width 100%
  align-items center
  font-size $toolbar-title-font-size
  font-weight $toolbar-title-font-weight
  padding $toolbar-title-padding
  text-align center

.s-toolbar-subtitle
  font-size $toolbar-subtitle-font-size
  opacity .7

.s-toolbar-title, .s-toolbar-subtitle
  text-overflow ellipsis
  white-space nowrap
  overflow hidden

// visibility.styl
.no-margin
  margin 0 !important
.no-padding
  padding 0 !important
.no-border
  border 0 !important
.no-border-radius
  border-radius 0 !important
.no-box-shadow
  box-shadow none !important

.ellipsis
  text-overflow ellipsis
  white-space nowrap
  overflow hidden

  &-2-lines, &-3-lines
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
  &-2-lines
    -webkit-line-clamp 2
  &-3-lines
    -webkit-line-clamp 3

.readonly, [readonly], .disabled, [disabled]
  &, * // @stylint ignore
    cursor not-allowed !important
.disabled, [disabled]
  opacity .6 !important

.hidden
  display none !important
.invisible
  visibility hidden !important
.transparent
  background transparent !important

.overflow-auto
  overflow auto !important
.overflow-hidden
  overflow hidden !important

.dimmed, .light-dimmed
  &:after
    content ''
    position absolute
    top 0
    right 0
    bottom 0
    left 0
.dimmed:after
  background $dimmed-background !important
.light-dimmed:after
  background $light-dimmed-background !important
body
  &.dimmed, &.light-dimmed
    &:after
      z-index $z-body-dimmed !important
.z-absolute
  z-index $z-absolute !important

for type in desktop mobile cordova electron ios mat touch within-iframe platform-ios platform-android
  body:not(.{type}) .{type}-only,
  body.{type} .{type}-hide
    display none !important

@media all and (orientation portrait)
  .orientation-landscape
    display none !important

@media all and (orientation landscape)
  .orientation-portrait
    display none !important

@media (max-width $breakpoint-xs-max)
  .xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-sm-min) and (max-width $breakpoint-sm-max)
  .sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
  .lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl
    display none !important
@media (min-width $breakpoint-xl-min)
  .xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl
    display none !important

.s-focus-helper
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  pointer-events none
  border-radius inherit
  background currentColor
  opacity 0
  transition opacity .12s ease-in

.s-focusable:focus, .s-hoverable:hover
  .s-focus-helper
    opacity .15

body.ios .s-hoverable:active .s-focus-helper
  opacity .3

// positioning.styl
.pull-left, .float-left
  float left !important
.pull-right, .float-right
  float right !important

.relative-position
  position relative !important

.fixed,
.fullscreen,
.fixed-bottom,
.fixed-left,
.fixed-right,
.fixed-top,
.fixed-top-left,
.fixed-top-right,
.fixed-bottom-left,
.fixed-bottom-right
  position fixed !important

.absolute,
.absolute-full,
.absolute-bottom,
.absolute-left,
.absolute-right,
.absolute-top,
.absolute-top-left,
.absolute-top-right,
.absolute-bottom-left,
.absolute-bottom-right
  position absolute !important

.fixed-top, .absolute-top
  top 0
  left 0
  right 0
.fixed-right, .absolute-right
  top 0
  right 0
  bottom 0
.fixed-bottom, .absolute-bottom
  right 0
  bottom 0
  left 0
.fixed-left, .absolute-left
  top 0
  bottom 0
  left 0

.fixed-top-left, .absolute-top-left
  top 0
  left 0
.fixed-top-right, .absolute-top-right
  top 0
  right 0
.fixed-bottom-left, .absolute-bottom-left
  bottom 0
  left 0
.fixed-bottom-right, .absolute-bottom-right
  bottom 0
  right 0

.absolute-full, .fullscreen
  top 0
  right 0
  bottom 0
  left 0

.vertical-
  &top
    vertical-align top !important
  &middle
    vertical-align middle !important
  &bottom
    vertical-align bottom !important

.on-left
  margin-right 12px !important
.on-right
  margin-left 12px !important

.s-rating
  color $rating-grade-color
  vertical-align middle

  i
    color currentColor
    text-shadow $rating-shadow
    position relative
    cursor default
    opacity .4
  i + i
    margin-left .3rem

  i.hovered
    transform scale(1.3)
  i.exselected
    opacity .7
  i.active
    opacity 1

  &.editable i
    cursor pointer

.s-knob, .s-knob > div
  position relative
  display inline-block
.s-knob > div
  width 100%
  height 100%

.s-knob-label
  width 100%
  pointer-events none
  position absolute
  left 0
  right 0
  top 0
  bottom 0

  i
    font-size 130%

$slider-height              = 28px
$slider-track-height        = 2px
$slider-mark-height         = 10px
$slider-handle-size         = 22px
$slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)

.s-slider-track, .s-slider-mark
  opacity .4
  background currentColor

.s-slider-track
  position absolute
  top 50%
  left 0
  transform translateY(-50%)
  height $slider-track-height
  width 100%
  &:not(.dragging)
    transition all .3s ease
  &.active-track
    opacity 1
  &.track-draggable.dragging
    height ($slider-track-height * 2)
    transition height .3s ease
  &.handle-at-minimum
    background transparent

.s-slider-mark
  position absolute
  top 50%
  height $slider-mark-height
  width 2px
  transform translateX(-50%) translateY(-50%)

.s-slider-handle-container
  position relative
  height 100%
  margin-left ($slider-handle-size / 2)
  margin-right ($slider-handle-size / 2)

.s-slider-label
  top 0
  left ($slider-handle-size / 2)
  opacity 0
  transform translateX(-50%) translateY(0) scale(0)
  transition all .2s
  padding 5px 9px
  &.label-always
    opacity 1
    transform $slider-label-transform

.s-slider-handle
  position absolute
  top 50%
  transform translate3d(-50%, -50%, 0)
  transform-origin center
  transition all .3s ease
  width $slider-handle-size
  height $slider-handle-size
  background white
  box-shadow $shadow-3
  &.dragging
    transform translate3d(-50%, -50%, 0)
    transition opacity .3s ease, transform .3s ease
    .s-slider-label
      opacity 1
      transform $slider-label-transform

.s-slider-ring
  position absolute
  top -50%
  left -50%
  width 200%
  height 200%
  border-radius inherit
  pointer-events none
  opacity 0
  transform scale(0)
  transition all .2s ease-in
  background currentColor

.s-slider:not(.disabled)
  &:focus, &:hover
    .s-slider-ring
      opacity .4
      transform scale(1)

.s-slider.disabled
  .s-slider-handle
    border 2px solid white
  .s-slider-handle.handle-at-minimum
    background currentColor

.s-slider
  height $slider-height
  width 100%
  color $primary
  cursor pointer

  &.label-always, &.with-padding
    padding 55px 0 5px
    height 85px

  &.has-error
    color $negative