quasar/dist/quasar.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

/*!
 * Quasar Framework v1.2.5
 * (c) 2015-present Razvan Stoenescu
 * Released under the MIT License.
 */
$space-base   ?= 16px
$space-x-base ?= $space-base
$space-y-base ?= $space-base
$space-none ?= { x: 0, y: 0 }
$space-xs   ?= { x: ($space-x-base * .25), y: ($space-y-base * .25) }
$space-sm   ?= { x: ($space-x-base * .5),  y: ($space-y-base * .5)  }
$space-md   ?= { x: $space-x-base,         y: $space-y-base         }
$space-lg   ?= { x: ($space-x-base * 1.5), y: ($space-y-base * 1.5) }
$space-xl   ?= { x: ($space-x-base * 3),   y: ($space-y-base * 3)   }
$spaces ?= {
  none: $space-none,
  xs: $space-xs,
  sm: $space-sm,
  md: $space-md,
  lg: $space-lg,
  xl: $space-xl
}
$breakpoint-xs ?= 599px
$breakpoint-sm ?= 1023px
$breakpoint-md ?= 1439px
$breakpoint-lg ?= 1919px
$flex-cols      ?= 12
$flex-gutter-xs ?= ($space-base * .25)
$flex-gutter-sm ?= ($space-base * .5)
$flex-gutter-md ?= $space-base
$flex-gutter-lg ?= ($space-base * 1.5)
$flex-gutter-xl ?= ($space-base * 3)
$body-font-size   ?= 14px
$body-line-height ?= 1.5
$flex-gutter ?= {
  none: 0,
  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, 
  md: $breakpoint-sm + 1, 
  lg: $breakpoint-md + 1, 
  xl: $breakpoint-lg + 1  
}
$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
$headings ?= {
  h1: {
    size: 6rem,
    line-height: 6rem,
    weight: 300,
    letter-spacing: -.01562em
  },
  h2: {
    size: 3.75rem,
    line-height: 3.75rem,
    letter-spacing: -.00833em,
    weight: 300
  },
  h3: {
    size: 3rem,
    line-height: 3.125rem,
    letter-spacing: normal,
    weight: 400
  },
  h4: {
    size: 2.125rem,
    line-height: 2.5rem,
    letter-spacing: .00735em,
    weight: 400
  },
  h5: {
    size: 1.5rem,
    line-height: 2rem,
    letter-spacing: normal,
    weight: 400
  },
  h6: {
    size: 1.25rem,
    line-height: 2rem,
    letter-spacing: .0125em,
    weight: 500
  },
  subtitle1: {
    size: 1rem,
    line-height: 1.75rem,
    letter-spacing: .00937em,
    weight: 400
  },
  subtitle2: {
    size: .875rem,
    line-height: 1.375rem,
    letter-spacing: .00714em,
    weight: 500
  },
  body1: {
    size: 1rem,
    line-height: 1.5rem,
    letter-spacing: .03125em,
    weight: 400
  },
  body2: {
    size: .875rem,
    line-height: 1.25rem,
    letter-spacing: .01786em,
    weight: 400
  },
  overline: {
    size: .75rem,
    line-height: 2rem,
    letter-spacing: .16667em,
    weight: 500
  },
  caption: {
    size: .75rem,
    line-height: 1.25rem,
    letter-spacing: .03333em,
    weight: 400
  }
}
$h-tags ?= {
  h1: $headings.h1,
  h2: $headings.h2,
  h3: $headings.h3,
  h4: $headings.h4,
  h5: $headings.h5,
  h6: $headings.h6
}
$text-weights ?= {
  thin: 100,
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700,
  bolder: 900
}
$primary   ?= #027BE3
$secondary ?= #26A69A
$accent    ?= #9C27B0
$positive  ?= #21BA45
$negative  ?= #C10015
$info      ?= #31CCEC
$warning   ?= #F2C037
$light     ?= #bdbdbd
$dark      ?= #424242
$faded     ?= #777
$dimmed-background       ?= rgba(0, 0, 0, .4)
$light-dimmed-background ?= rgba(255, 255, 255, .6)
$separator-color         ?= rgba(0, 0, 0, .12)
$separator-dark-color    ?= rgba(255, 255, 255, .48)
$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
$ios-statusbar-height ?= 20px
$z-fab                ?= 990
$z-side               ?= 1000
$z-marginals          ?= 2000
$z-fixed-drawer       ?= 3000
$z-fullscreen         ?= 6000
$z-menu               ?= 6000
$z-top                ?= 7000
$z-tooltip            ?= 9000
$z-notify             ?= 9500
$z-max                ?= 9998
$shadow-color         ?= black
$shadow-transition    ?= box-shadow .28s cubic-bezier(.4, 0, .2, 1)
$inset-shadow         ?= 0 7px 9px -7px rgba($shadow-color, .7) inset
$elevation-umbra      ?= rgba($shadow-color, .2)
$elevation-penumbra   ?= rgba($shadow-color, .14)
$elevation-ambient    ?= rgba($shadow-color, .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
$generic-hover-transition       ?= .3s cubic-bezier(.25, .8, .5, 1)
$typography-font-family         ?= 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif
$min-line-height                ?= 1.12
$button-border-radius           ?= 3px
$button-padding                 ?= 4px 16px
$button-dense-padding           ?= .285em
$button-transition              ?= $generic-hover-transition
$button-font-size               ?= 14px
$button-line-height             ?= 1.718em
$button-font-weight             ?= 500
$button-shadow                  ?= $shadow-2
$button-shadow-active           ?= $shadow-5
$button-rounded-border-radius   ?= 28px
$button-push-border-radius      ?= 7px
$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     ?= $generic-border-radius
$chat-message-distance          ?= 8px
$chat-message-text-padding      ?= 8px
$item-base-color                ?= $grey-5
$editor-border-color            ?= $separator-color
$editor-content-padding         ?= 10px
$editor-content-min-height      ?= 10em
$editor-toolbar-padding         ?= 4px
$editor-hr-color                ?= $editor-border-color
$editor-button-gutter           ?= 4px
$fab-margin                     ?= 5px
$table-transition               ?= $generic-hover-transition
$table-border-radius            ?= $generic-border-radius
$table-box-shadow               ?= $shadow-2
$table-border-color             ?= $separator-color
$table-hover-background         ?= rgba(0, 0, 0, .03)
$table-selected-background      ?= rgba(0, 0, 0, .06)
$table-dark-border-color        ?= $separator-dark-color
$table-dark-hover-background    ?= rgba(255, 255, 255, .07)
$table-dark-selected-background ?= rgba(255, 255, 255, .1)
$toolbar-min-height             ?= 50px
$toolbar-padding                ?= 0 12px
$toolbar-inset-size             ?= 58px
$toolbar-title-font-size        ?= 21px
$toolbar-title-font-weight      ?= normal
$toolbar-title-letter-spacing   ?= .01em
$toolbar-title-padding          ?= 0 12px
$layout-border                  ?= 1px solid $separator-color
$layout-shadow                  ?= 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24)
$menu-background                ?= white
$menu-box-shadow                ?= $shadow-2
$menu-max-width                 ?= 95vw
$rating-grade-color             ?= $yellow
$rating-shadow                  ?= 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
$tooltip-color                  ?= #fafafa
$tooltip-background             ?= $grey-7
$tooltip-padding                ?= 6px 10px
$tooltip-border-radius          ?= $generic-border-radius
$tooltip-fontsize               ?= 10px
$tooltip-mobile-padding         ?= 8px 16px
$tooltip-mobile-fontsize        ?= 14px
$option-focus-transition        ?= .22s cubic-bezier(0,0,.2,1)
$input-font-size                ?= 14px
$input-text-color               ?= rgba(0,0,0,.87)
$input-label-color              ?= rgba(0,0,0,.6)
$input-autofill-color           ?= inherit
$img-width                      ?= 100%
$img-background-repeat          ?= no-repeat
$img-loading-font-size          ?= 50px
$img-content-position           ?= absolute
$img-content-padding            ?= 16px
$img-content-color              ?= white
$img-content-background         ?= rgba(0, 0, 0, .47)
*, *:before, *:after 
  box-sizing inherit
  -webkit-tap-highlight-color transparent
  -moz-tap-highlight-color transparent
html, body, #q-app
  width 100%
  direction ltr
body.platform-ios.within-iframe, body.platform-ios.within-iframe #q-app
  width 100px
  min-width 100%
html, body
  margin 0
  box-sizing border-box
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary
  display block
audio:not([controls])
  display none
  height 0
abbr[title]
  border-bottom none 
  text-decoration underline 
  text-decoration underline dotted 
dfn
  font-style italic
img
  border-style none
svg:not(:root)
  overflow hidden
code, kbd, pre, samp
  font-family monospace, monospace 
  font-size 1em 
hr
  box-sizing content-box 
  height 0 
  overflow visible 
button,
input,
select,
textarea
  font inherit
  margin 0
optgroup
  font-weight bold
button,
input, 
select 
  overflow visible
button::-moz-focus-inner, input::-moz-focus-inner
  border 0
  padding 0
button:-moz-focusring, input:-moz-focusring
  outline 1px dotted ButtonText
textarea
  overflow auto
input[type='search']
  -webkit-appearance textfield
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
  -webkit-appearance none
.q-icon
  line-height 1
  width 1em
  height 1em
  letter-spacing normal
  text-transform none
  white-space nowrap
  word-wrap normal
  direction ltr
  text-align center
  position relative
  font-display block 
                     
  &:before
    width 100%
    height 100%
    display flex !important
    align-items center
    justify-content center
.q-icon,
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp
  user-select none
  cursor inherit
  font-size inherit
  display inline-flex
  align-items center
  justify-content center
  vertical-align middle
.q-panel
  height 100%
  width 100%
  > div
    height 100%
    width 100%
.q-panel-parent
  overflow hidden
  position relative
.q-loading-bar
  position fixed
  z-index $z-max
  transition transform .5s cubic-bezier(0, 0, .2, 1), opacity .5s
  &--top
    left 0 /* rtl:ignore */
    right 0 /* rtl:ignore */
    top 0
    width 100%
  &--bottom
    left 0 /* rtl:ignore */
    right 0 /* rtl:ignore */
    bottom 0
    width 100%
  &--right
    top 0
    bottom 0
    right 0
    height 100%
  &--left
    top 0
    bottom 0
    left 0
    height 100%
.q-avatar
  position relative
  vertical-align middle
  display inline-block
  border-radius 50%
  font-size 48px
  height 1em
  width 1em
  &__content
    font-size .5em
    line-height .5em
  &__content, img:not(.q-icon)
    border-radius inherit
    height inherit
    width inherit
.q-avatar__content--square
  border-radius 0
.q-badge
  background-color $primary
  background-color var(--q-color-primary)
  color white
  padding 2px 6px
  border-radius $generic-border-radius
  font-size 12px
  line-height 12px
  font-weight normal
  vertical-align baseline
  &--single-line
    white-space nowrap
  &--multi-line
    word-break break-all
    word-wrap break-word
  &--floating
    position absolute
    top -4px
    right -3px
    cursor inherit
  &--transparent
    opacity 0.8
.q-banner
  min-height 54px
  padding 8px 16px
  background white
  &--top-padding
    padding-top 14px
  &__avatar
    min-width 1px !important
    > .q-avatar
      font-size 46px
    > .q-icon
      font-size 40px
  &__avatar:not(:empty) + &__content
    padding-left 16px
  &__actions
    &.col-auto
      padding-left 16px
    &.col-all
      .q-btn-item
        margin 4px 0 0 4px
  &--dense
    min-height 32px
    padding 8px
    &.q-banner--top-padding
      padding-top 12px
    .q-banner__avatar
      > .q-avatar, > .q-icon
        font-size 28px
    .q-banner__avatar:not(:empty) + .q-banner__content
      padding-left 8px
    .q-banner__actions
      &.col-auto
        padding-left 8px
.q-bar
  background rgba(0, 0, 0, .2)
  > .q-icon
    margin-left 2px
  > div, > div + .q-icon
    margin-left 8px
  > .q-btn
    margin-left 2px
  > .q-icon:first-child, > .q-btn:first-child, > div:first-child
    margin-left 0
  &--standard
    padding 0 12px
    height 32px
    font-size 18px
    > div
      font-size 16px
    .q-btn
      font-size 11px
  &--dense
    padding 0 8px
    height 24px
    font-size 14px
    .q-btn
      font-size 8px
  &--dark
    background rgba(255, 255, 255, .15)
.q-breadcrumbs
  &__el
    color inherit
  &__el-icon
    font-size 125%
    &--with-label
      margin-right 8px
  &--last a
    pointer-events none
[dir=rtl] .q-breadcrumbs__separator .q-icon
  transform scaleX(-1) /* rtl:ignore */
.q-btn
  position relative
  outline 0
  border 0
  vertical-align middle
  cursor pointer
  padding $button-padding
  font-size $button-font-size
  line-height $button-line-height
  text-decoration none
  color inherit
  background transparent
  transition $button-transition
  min-height 2.572em
  box-shadow $button-shadow
  font-weight $button-font-weight
  text-transform uppercase
  button&
    -webkit-appearance button
  a&
    display inline-flex
  .q-icon, .q-spinner
    font-size $button-line-height
  &.disabled
    opacity .7 !important
  &--standard:not(.disabled)
    &:before
      
      
      
      
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius inherit
      transition $button-transition
    &:active
    &.q-btn--active
      &:before
        box-shadow $button-shadow-active
  &--no-uppercase
    text-transform none
  &--rectangle
    border-radius $button-border-radius
  &--outline
    border 1px solid currentColor
    background transparent !important
  &--push
    border-radius $button-push-border-radius
    border-bottom 3px solid rgba(0, 0, 0, .15)
    &:active,
    &.q-btn--active
      &:not(.disabled)
        transform translateY(3px)
        border-bottom-width 0
    .q-focus-helper, .q-ripple-container
      height auto
      bottom -3px
  &--rounded
    border-radius $button-rounded-border-radius
  &--round
    border-radius 50%
    padding 0
    min-height 0
    height 3em
    width 3em
    min-width 3em
    min-height 3em
  &--flat, &--outline, &--unelevated
    box-shadow none
  &--dense
    padding $button-dense-padding
    min-height 2em
    &.q-btn--round
      padding 0
      height 2.4em
      width 2.4em
      min-height 2.4em
      min-width 2.4em
    .on-left
      margin-right 6px
    .on-right
      margin-left 6px
  &--fab, &--fab-mini
    .q-icon
      font-size 24px
      width 100%
      height 100%
  &--fab
    height 56px
    width 56px
  &--fab-mini
    height 40px
    width 40px
  
  &__content
    transition opacity .3s
    &--hidden
      opacity 0
    &:before
      content ''
  &__progress
    transition transform .3s
    transform-origin top left
    height 100%
    background rgba(255, 255, 255, .25)
    &--dark
      background rgba(0, 0, 0, .2)
.q-btn-dropdown--split .q-btn-dropdown__arrow-container
  padding 0 4px
  border-left 1px solid rgba(255, 255, 255, .3)
.q-btn-dropdown--simple .q-btn-dropdown__arrow
  margin-left 8px
.q-btn-dropdown__arrow
  transition transform .28s
.q-btn-group
  border-radius $button-border-radius
  box-shadow $button-shadow
  vertical-align middle
  > .q-btn-item
    box-shadow none
  > .q-btn-group
    > .q-btn:first-child
      border-top-left-radius inherit
      border-bottom-left-radius inherit
    > .q-btn:last-child
      border-top-right-radius inherit
      border-bottom-right-radius inherit
  > .q-btn-group:not(:first-child) > .q-btn:first-child
    border-left 0
  > .q-btn-group:not(:last-child) > .q-btn:last-child
    border-right 0
  > .q-btn-item:not(:last-child)
    border-top-right-radius 0
    border-bottom-right-radius 0
  > .q-btn-item:not(:first-child)
    border-top-left-radius 0
    border-bottom-left-radius 0
  &--push
    border-radius $button-push-border-radius
    > .q-btn--push
      .q-btn__content
        transition $button-transition
      &:active,
      &.q-btn--active
        &:not(.disabled)
          border-bottom-width 3px
          transform none
          .q-btn__content
            transform translateY(3px)
  &--rounded
    border-radius $button-rounded-border-radius
  &--flat, &--outline, &--unelevated
    box-shadow none
    > .q-btn-item
      box-shadow none
  &--outline
    > .q-separator
      display none
    > .q-btn-item + .q-btn-item
      border-left 0
    > .q-btn-item:not(:last-child)
      border-right 0
  &--stretch
    align-self stretch
    border-radius 0
  &--glossy
    > .q-btn-item
      background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04)) !important
  &--spread
    > .q-btn-group
      display flex !important
    > .q-btn-item, > .q-btn-group > .q-btn-item:not(.q-btn-dropdown__arrow-container)
      width auto
      min-width 0
      max-width 100%
      flex 10000 1 0%
.q-card
  box-shadow $shadow-2
  border-radius $generic-border-radius
  vertical-align top
  background white
  position relative
  > div, > img
    &:first-child
      border-top 0
      border-top-left-radius inherit
      border-top-right-radius inherit
  > div, > img
    &:last-child
      border-bottom 0
      border-bottom-left-radius inherit
      border-bottom-right-radius inherit
  > div, > img
    &:not(:first-child)
      border-top-left-radius 0
      border-top-right-radius 0
  > div, > img
    &:not(:last-child)
      border-bottom-left-radius 0
      border-bottom-right-radius 0
  > div
    border-left 0
    border-right 0
    box-shadow none
  &--bordered
    border 1px solid $separator-color
  &--dark
    color white
    border-color $separator-dark-color
  &__section
    position relative
    padding 16px
  &__actions
    padding 8px
    .q-btn
      padding 0 8px
    &--horiz
      > .q-btn-item + .q-btn-item
      > .q-btn-group + .q-btn-item
      > .q-btn-item + .q-btn-group
        margin-left 8px
    &--vert
      > .q-btn-item + .q-btn-item
      > .q-btn-group + .q-btn-item
      > .q-btn-item + .q-btn-group
        margin-top 4px
      > .q-btn-group > .q-btn-item
        flex-grow 1
  &__section + &__section
    padding-top 0
  > img
    display block
    width 100%
    max-width 100%
    border 0
.q-carousel
  background-color inherit 
  height 400px
  &__slide
    height 100%
    padding 16px
    background-size cover
    background-position 50%
  &__slides-container
    height 100%
  &__control
    color white
  &__prev-arrow,
  &__next-arrow
    top 50%
    transform translateY(-50%)
    .q-icon
      font-size 46px
  &__prev-arrow
    left 4px
  &__next-arrow
    right 4px
  &__navigation
    padding 0 8px 8px
    left 0
    right 0
    bottom 0
    &-inner
      flex 1 1 auto
    .q-btn
      margin 6px 4px
      padding 5px
    .q-btn:not(.q-carousel__navigation-icon--active)
      opacity .5
    img
      margin 2px
      height 50px
      width auto
      display inline-block
      cursor pointer
      border 1px solid transparent
      vertical-align middle
      opacity .8
      transition opacity .3s
      &:hover, &.q-carousel__thumbnail--active
        opacity 1
      &.q-carousel__thumbnail--active
        border-color white
        cursor default
  &.q-carousel--navigation .q-carousel__slide
    padding-bottom 50px
  &.q-carousel--arrows .q-carousel__slide
    padding-left 56px
    padding-right 56px
  &.fullscreen
    height 100%
.q-message-name, .q-message-stamp, .q-message-label
  font-size small
.q-message-label
  margin (3 * $chat-message-distance) 0
.q-message-stamp
  color inherit
  margin-top 4px
  opacity .6
  display none
.q-message-avatar
  border-radius 50%
  width $chat-message-avatar-size
  height $chat-message-avatar-size
  min-width $chat-message-avatar-size
.q-message
  margin-bottom $chat-message-distance
  &:first-child .q-message-label
    margin-top 0
.q-message-received
  .q-message-avatar
    margin-right 8px
  .q-message-text
    color $chat-message-received-bg
    border-radius $chat-message-border-radius $chat-message-border-radius $chat-message-border-radius 0
    &:last-child:before
      right 100%
      border-right 0 solid transparent
      border-left 8px solid transparent
      border-bottom 8px solid currentColor
  .q-message-text-content
    color $chat-message-received-color
.q-message-sent
  .q-message-name
    text-align right
  .q-message-avatar
    margin-left 8px
  .q-message-container
    flex-direction row-reverse
  .q-message-text
    color $chat-message-sent-bg
    border-radius $chat-message-border-radius $chat-message-border-radius 0 $chat-message-border-radius
    &:last-child:before
      left 100%
      border-left 0 solid transparent
      border-right 8px solid transparent
      border-bottom 8px solid currentColor
  .q-message-text-content
    color $chat-message-sent-color
.q-message-text
  background currentColor
  padding $chat-message-text-padding
  line-height max(1.2, $min-line-height)
  word-break break-word
  position relative
  & + &
    margin-top 3px
  &:last-child
    min-height $chat-message-avatar-size
    .q-message-stamp
      display block
    &:before
      content ''
      position absolute
      bottom 0
      width 0
      height 0
$checkbox-transition = .22s cubic-bezier(0,0,.2,1) 0ms
.q-checkbox
  vertical-align middle
  &__bg
    left 11px
    top 11px
    right auto
    bottom 0
    width 45%
    height 45%
    border 2px solid currentColor
    border-radius 2px
    transition background $checkbox-transition
  &__native
    width 1px
    height 1px
  &__label
    padding-left 4px
    font-size 14px
    line-height 20px
  &.reverse &__label
    padding-right 4px
  &__check
    color white
    path
      stroke currentColor
      stroke-width 3.12px
      stroke-dashoffset 29.78334
      stroke-dasharray 29.78334
  &__check-indet
    width 100%
    height 0
    left 0
    top 50%
    border-color white
    border-width 1px
    border-style solid
    transform translate3d(0, -50%, 0) rotate3d(0, 0, 1, -280deg) scale3d(0, 0, 0)
  &__inner
    width 40px
    min-width 40px
    height 40px
    padding 11px
    outline 0
    border-radius 50%
    color rgba(0, 0, 0, .54)
    &--active, &--indeterminate
      color $primary
      color var(--q-color-primary)
      .q-checkbox__bg
        background currentColor
    &--active
      path
        stroke-dashoffset 0
        transition stroke-dashoffset .18s cubic-bezier(.4,0,.6,1) 0ms
    &--indeterminate
      .q-checkbox__check-indet
        transform translate3d(0, -50%, 0) rotate3d(0, 0, 1, 0) scale3d(1, 1, 1)
        transition transform $checkbox-transition
  &.disabled
    opacity .75 !important
  &--dark
    .q-checkbox__inner
      color rgba(255, 255, 255, .7)
      &:before
        opacity .32 !important
      &--active, &--indeterminate
        color $primary
        color var(--q-color-primary)
  &--dense
    .q-checkbox__inner
      width 20px
      min-width 20px
      height 20px
      padding 0
    .q-checkbox__bg
      left 1px
      top 1px
      width 18px
      height 18px
body.desktop
  .q-checkbox
    &__inner:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      background currentColor
      opacity .12
      transform scale3d(0, 0, 0)
      transition transform $option-focus-transition
    &:focus:not(.disabled)
      .q-checkbox__inner:before
        transform scale3d(1, 1, 1)
    &--dense:focus:not(.disabled) .q-checkbox__inner:before
      transform scale3d(1.5, 1.5, 1.5)
  .q-table--dense .q-checkbox--dense:focus:not(.disabled) .q-checkbox__inner:before
    transform scale3d(1.4, 1.4, 1.4)
$chip-height = 2em
.q-chip
  vertical-align middle
  border-radius 16px
  outline 0
  position relative
  height $chip-height
  margin 4px
  background #e0e0e0
  color rgba(0,0,0,.87)
  font-size 14px
  padding 0.5em 0.9em
  &--colored
    .q-chip__icon
      color inherit
  &--outline
    background transparent
    border 1px solid currentColor
  .q-avatar
    font-size $chip-height
    margin-left -0.45em
    margin-right 0.2em
    border-radius 16px
  &--selected
    .q-avatar
      display none
  &__icon
    color rgba(0,0,0,.54)
    font-size 1.5em
    margin -0.2em
    &--left
      margin-right 0.2em
    &--right
      margin-left 0.2em
    &--remove
      margin-left 0.1em
      margin-right -0.5em
      opacity .6
      outline none
      &:hover,
      &:focus
        opacity 1
  &__content
    white-space nowrap
  &--dense
    border-radius 12px
    padding 0 0.4em
    height 1.5em
    .q-avatar
      font-size 1.5em
      margin-left -0.27em
      margin-right 0.1em
      border-radius 12px
    .q-chip__icon
      font-size 1.25em
      &--left
        margin-right 0.195em
      &--remove
        margin-right -0.25em
  &--square
    border-radius $generic-border-radius
    .q-avatar
      border-radius ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
body.desktop .q-chip--clickable:focus
  box-shadow $shadow-1
.q-circular-progress
  display inline-block
  position relative
  vertical-align middle
  width 1em
  height 1em
  line-height 1
  &.q-focusable
    border-radius 50%
  &__svg
    width 100%
    height 100%
  &__text
    font-size .25em
  &--indeterminate
    .q-circular-progress__svg
      transform-origin 50% 50%
      animation q-spin 2s linear infinite /* rtl:ignore */
    .q-circular-progress__circle
      stroke-dasharray 1 400
      stroke-dashoffset 0
      animation q-circular-progress-circle 1.5s ease-in-out infinite /* rtl:ignore */
@keyframes q-circular-progress-circle
  0%
    stroke-dasharray 1, 400
    stroke-dashoffset 0
  50%
    stroke-dasharray 400, 400
    stroke-dashoffset -100
  100%
    stroke-dasharray 400, 400
    stroke-dashoffset -300
.q-color-picker
  overflow hidden
  background white
  max-width 350px
  vertical-align top
  min-width 150px
  border-radius $generic-border-radius
  box-shadow $shadow-2
  &__header
    height 88px
    input
      line-height 24px
      border 0
    .q-tab--inactive
      background linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1))
  &__error-icon
    bottom 2px
    right 2px
    font-size 24px
    opacity 0
    transition opacity .3s ease-in
  &__header-content
    position relative
    background white
    &--light
      color black
    &--dark
      color white
      .q-tab--inactive
        &:before
          content ''
          position absolute
          top 0
          right 0
          bottom 0
          left 0
          background rgba(255, 255, 255, .2)
  &__header-banner
    height 52px
  &__header-bg
    background white
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
  &__footer
    .q-tab--inactive
      background linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.1))
  
  &__spectrum
    width 100%
    height 100%
  &__spectrum-tab
    padding 10px
  &__spectrum-white
    background linear-gradient(to right, white, rgba(255, 255, 255, 0))
  &__spectrum-black
    background linear-gradient(to top, black, rgba(0, 0, 0, 0))
  &__spectrum-circle
    width 10px
    height 10px
    box-shadow 0 0 0 1.5px white, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4)
    border-radius 50%
    transform translate(-5px, -5px)
  &__hue .q-slider__track-container
    background linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) 
    opacity 1
  &__alpha .q-slider__track-container
    color white
    opacity 1
    height 8px
    background-color white
    background-image url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
    &:after
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background linear-gradient(90deg, rgba(255, 255, 255, 0), $grey-7)
  &__sliders
    padding 4px 0 12px
    .q-slider__track-container
      height 9px
    .q-slider__track
      display none
    .q-slider__thumb-container
      top 4px
    .q-slider__thumb
      stroke-width 13px
    .q-slider
      height 20px
      margin-top 8px
      color $grey-9
  
  &__tune-tab
    .q-slider
      margin-left 18px
      margin-right 18px
    input
      font-size 11px
      border 1px solid $grey-4
      border-radius $generic-border-radius
      width 4em
  
  &__palette-rows
    &--editable .q-color-picker__cube
      cursor pointer
  &__cube
    padding-bottom 10%
    width 10% !important
  
  input
    color inherit
    background transparent
    outline 0
    text-align center
  .q-tabs
    overflow hidden
  .q-tab
    &--active
      box-shadow 0px 0px 14px 3px rgba(0,0,0,0.2)
      .q-focus-helper
        display none
  .q-tab__indicator
    display none
  .q-tab-panels
    background inherit
  &--dark
    background $grey-9
    color white
    .q-color-picker__tune-tab input
      border 1px solid alpha(#fff, .3)
    .q-slider
      color $grey-5
.q-date
  display inline-flex
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  max-width 100%
  .q-btn
    font-weight normal
  &--bordered
    border 1px solid $separator-color
  &__header
    border-top-left-radius inherit
    color white
    background-color $primary
    background-color var(--q-color-primary)
    padding 16px
  &__content
    outline none
  &__header-link
    opacity .64
    outline 0
    transition opacity .3s ease-out
    &--active, &:hover, &:focus
      opacity 1
  &__header-subtitle
    height 24px
    font-size 14px
    line-height 1.75
    letter-spacing 0.00938em
  &__header-title-label
    font-size 24px
    line-height 1.2
    letter-spacing 0.00735em
  &__view
    height 100%
    width 100%
    min-width 288px
    padding 16px
  &__navigation
    height 12.5%
    > div:first-child
      width 8%
      min-width 24px
      justify-content flex-end
    > div:last-child
      width 8%
      min-width 24px
      justify-content flex-start
  &__calendar-weekdays
    height 12.5%
    > div
      opacity .38
      font-size 12px
  &__calendar-item
    display inline-flex
    align-items center
    justify-content center
    vertical-align middle
    width 14.285% !important
    height 12.5% !important
    position relative
    > div, button
      width 32px
      height 32px
      border-radius 50%
    > div
      line-height 32px
      text-align center
    &--out
      opacity .18
    &--fill
      visibility hidden
  &__calendar-days-container
    height 75%
  &__calendar-days > div
    height 16.66% !important
  &__event
    position absolute
    bottom 2px
    left 50%
    height 5px
    width 8px
    border-radius 5px
    background-color $secondary
    background-color var(--q-color-secondary)
    transform translate3d(-50%, 0, 0)
  &__today
    box-shadow 0 0 1px 0 currentColor
  &__years-content
    padding 0 8px
  &__years-item, &__months-item
    flex 0 0 (round(1 / 3 * 100, 4))%
  &__months-content
    flex 0 0 (round(10 / 12 * 100, 4))%
  &.disabled, &--readonly
    .q-date__header, .q-date__content
      pointer-events none
  &--readonly .q-date__navigation
    display none
  &--portrait
    flex-direction column
  &--portrait-standard
    height 410px
    width 290px
    .q-date__content
      height calc(100% - 86px) 
    .q-date__header
      border-top-right-radius inherit
      height 86px
    .q-date__header-title
      align-items center
      height 30px
  &--portrait-minimal
    height 324px
    width 290px
    .q-date__content
      height 100% 
  &--landscape
    flex-direction row
    align-items stretch
    > div
      display flex
      flex-direction column
    .q-date__content
      height 100%
  &--landscape-standard
    height 321px
    width 420px
    .q-date__header
      border-bottom-left-radius inherit
      min-width 110px
      width 110px
    .q-date__header-title
      flex-direction column
    .q-date__header-today
      margin-top 12px
  &--landscape-minimal
    height 321px
    width 310px
  &--dark
    color white
    background $grey-9
.q-time
  max-width 100%
  box-shadow $shadow-2
  border-radius $generic-border-radius
  background white
  outline none
  &--bordered
    border 1px solid $separator-color
  &__header
    border-top-left-radius inherit
    color white
    background-color $primary
    background-color var(--q-color-primary)
    padding 16px
    font-weight 300
  &__header-label
    font-size 28px
    line-height 1
    letter-spacing -0.00833em
    > div + div
      margin-left 4px
  &__link
    opacity .56
    outline 0
    transition opacity .3s ease-out
    &--active, &:hover, &:focus
      opacity 1
  &__header-ampm
    font-size 16px
    letter-spacing 0.1em
  &__content
    padding 16px
    &:before
      content ''
      display block
      padding-bottom 100%
  &__container-parent
    padding 16px
  &__container-child
    border-radius 50%
    background rgba(0, 0, 0, .12)
  &__clock
    padding 24px
    width 100%
    height 100%
    max-width 100%
    max-height 100%
    font-size 14px
  &__clock-circle
    position relative
  &__clock-center
    height 6px
    width 6px
    margin auto
    border-radius 50%
    min-height 0
    background currentColor
  &__clock-pointer
    width 1px
    height 50%
    transform-origin top center /* rtl:ignore */
    min-height 0
    position absolute
    left 50%
    right 0
    bottom 0
    color $primary
    color var(--q-color-primary)
    background currentColor
    transform translateX(-50%)
    &:before, &:after
      content ''
      position absolute
      left 0
      border-radius 50%
      background currentColor
      transform translateX(-44%)
    &:before
      bottom -4px
      width 8px
      height 8px
    &:after
      top -3px
      height 6px
      width 6px
  &__clock-position
    position absolute
    min-height 32px
    width 32px
    height 32px
    font-size 12px
    line-height 32px
    margin 0
    padding 0
    transform translate(-50%, -50%) /* rtl:ignore */
    border-radius 50%
    &--disable
      opacity .4
    &--active
      background-color $primary
      background-color var(--q-color-primary)
      color white
  for $pos in 0..11
    $angle = (270 + 30 * $pos)
    $top = (1 + sin($angle * 1deg))
    $left = (1 + cos($angle * 1deg))
    &__clock-pos-{$pos}
      top round($top * 50%, 2)
      left round($left * 50%, 2) /* rtl:ignore */
  for $pos in 12..23
    $angle = (270 + 30 * $pos)
    $top = (1 + sin($angle * 1deg))
    $left = (1 + cos($angle * 1deg))
    &__clock-pos-{$pos}
      top round(15% + $top * 35%, 2)
      left round(15% + $left * 35%, 2) /* rtl:ignore */
  &__now-button
    background-color $primary
    background-color var(--q-color-primary)
    color white
    top 12px
    right 12px
  &__event
    position absolute
    bottom 2px
    left 50%
    height 5px
    width 10px
    border-radius 5px
    background-color $secondary
    background-color var(--q-color-secondary)
    transform translate3d(-50%, 0, 0)
  &.disabled, &--readonly
    .q-time__header-ampm, .q-time__content
      pointer-events none
  &--portrait
    display inline-flex
    flex-direction column
    width 290px
    min-width 180px
    .q-time__header
      border-top-right-radius inherit
      min-height 86px
    .q-time__header-ampm
      margin-left 12px
  &--landscape
    display inline-flex
    align-items stretch
    width 420px
    min-width 310px
    min-height 180px
    > div
      display flex
      flex-direction column
      justify-content center
    .q-time__header
      border-bottom-left-radius inherit
      width 110px
    .q-time__header-ampm
      margin-top 12px
  &--dark
    color white
    background $grey-9
.q-dialog
  &__title
    font-size 1.25rem
    font-weight 500
    line-height 2rem
    letter-spacing 0.0125em
  &__message
    opacity 0.6
  &__inner
    outline 0
    > div
      pointer-events all
      overflow auto
      -webkit-overflow-scrolling touch
      will-change scroll-position
      border-radius $generic-border-radius
      box-shadow $shadow-4
    &--square > div
      border-r