
.text-primary
  color $primary
.bg-primary
  background-color $primary

.text-secondary
  color $secondary
.bg-secondary
  background-color $secondary

.text-tertiary
  color $tertiary
.bg-tertiary
  background-color $tertiary

.text-neutral
  color $neutral
.bg-neutral
  background-color $neutral

.text-faded
  color $faded
.bg-faded
  background-color $faded

.text-positive
  color $positive
.bg-positive
  background-color $positive

.text-negative
  color $negative
.bg-negative
  background-color $negative

.text-info
  color $info
.bg-info
  background-color $info

.text-warning
  color $warning
.bg-warning
  background-color $warning

.text-white
  color white !important
.bg-white
  background-color white !important

.text-black
  color black !important
.bg-black
  background-color black !important

.text-light
  color $light !important
.bg-light
  background-color $light !important

.text-dark
  color $dark !important
.bg-dark
  background-color $dark !important

// @stylint off

.text-red
  color $red

.text-red-1
  color $red-1

.text-red-2
  color $red-2

.text-red-3
  color $red-3

.text-red-4
  color $red-4

.text-red-5
  color $red-5

.text-red-6
  color $red-6

.text-red-7
  color $red-7

.text-red-8
  color $red-8

.text-red-9
  color $red-9

.text-red-10
  color $red-10

.text-red-11
  color $red-11

.text-red-12
  color $red-12

.text-red-13
  color $red-13

.text-red-14
  color $red-14

.text-pink
  color $pink

.text-pink-1
  color $pink-1

.text-pink-2
  color $pink-2

.text-pink-3
  color $pink-3

.text-pink-4
  color $pink-4

.text-pink-5
  color $pink-5

.text-pink-6
  color $pink-6

.text-pink-7
  color $pink-7

.text-pink-8
  color $pink-8

.text-pink-9
  color $pink-9

.text-pink-10
  color $pink-10

.text-pink-11
  color $pink-11

.text-pink-12
  color $pink-12

.text-pink-13
  color $pink-13

.text-pink-14
  color $pink-14

.text-purple
  color $purple

.text-purple-1
  color $purple-1

.text-purple-2
  color $purple-2

.text-purple-3
  color $purple-3

.text-purple-4
  color $purple-4

.text-purple-5
  color $purple-5

.text-purple-6
  color $purple-6

.text-purple-7
  color $purple-7

.text-purple-8
  color $purple-8

.text-purple-9
  color $purple-9

.text-purple-10
  color $purple-10

.text-purple-11
  color $purple-11

.text-purple-12
  color $purple-12

.text-purple-13
  color $purple-13

.text-purple-14
  color $purple-14

.text-deep-purple
  color $deep-purple

.text-deep-purple-1
  color $deep-purple-1

.text-deep-purple-2
  color $deep-purple-2

.text-deep-purple-3
  color $deep-purple-3

.text-deep-purple-4
  color $deep-purple-4

.text-deep-purple-5
  color $deep-purple-5

.text-deep-purple-6
  color $deep-purple-6

.text-deep-purple-7
  color $deep-purple-7

.text-deep-purple-8
  color $deep-purple-8

.text-deep-purple-9
  color $deep-purple-9

.text-deep-purple-10
  color $deep-purple-10

.text-deep-purple-11
  color $deep-purple-11

.text-deep-purple-12
  color $deep-purple-12

.text-deep-purple-13
  color $deep-purple-13

.text-deep-purple-14
  color $deep-purple-14

.text-indigo
  color $indigo

.text-indigo-1
  color $indigo-1

.text-indigo-2
  color $indigo-2

.text-indigo-3
  color $indigo-3

.text-indigo-4
  color $indigo-4

.text-indigo-5
  color $indigo-5

.text-indigo-6
  color $indigo-6

.text-indigo-7
  color $indigo-7

.text-indigo-8
  color $indigo-8

.text-indigo-9
  color $indigo-9

.text-indigo-10
  color $indigo-10

.text-indigo-11
  color $indigo-11

.text-indigo-12
  color $indigo-12

.text-indigo-13
  color $indigo-13

.text-indigo-14
  color $indigo-14

.text-blue
  color $blue

.text-blue-1
  color $blue-1

.text-blue-2
  color $blue-2

.text-blue-3
  color $blue-3

.text-blue-4
  color $blue-4

.text-blue-5
  color $blue-5

.text-blue-6
  color $blue-6

.text-blue-7
  color $blue-7

.text-blue-8
  color $blue-8

.text-blue-9
  color $blue-9

.text-blue-10
  color $blue-10

.text-blue-11
  color $blue-11

.text-blue-12
  color $blue-12

.text-blue-13
  color $blue-13

.text-blue-14
  color $blue-14

.text-light-blue
  color $light-blue

.text-light-blue-1
  color $light-blue-1

.text-light-blue-2
  color $light-blue-2

.text-light-blue-3
  color $light-blue-3

.text-light-blue-4
  color $light-blue-4

.text-light-blue-5
  color $light-blue-5

.text-light-blue-6
  color $light-blue-6

.text-light-blue-7
  color $light-blue-7

.text-light-blue-8
  color $light-blue-8

.text-light-blue-9
  color $light-blue-9

.text-light-blue-10
  color $light-blue-10

.text-light-blue-11
  color $light-blue-11

.text-light-blue-12
  color $light-blue-12

.text-light-blue-13
  color $light-blue-13

.text-light-blue-14
  color $light-blue-14

.text-cyan
  color $cyan

.text-cyan-1
  color $cyan-1

.text-cyan-2
  color $cyan-2

.text-cyan-3
  color $cyan-3

.text-cyan-4
  color $cyan-4

.text-cyan-5
  color $cyan-5

.text-cyan-6
  color $cyan-6

.text-cyan-7
  color $cyan-7

.text-cyan-8
  color $cyan-8

.text-cyan-9
  color $cyan-9

.text-cyan-10
  color $cyan-10

.text-cyan-11
  color $cyan-11

.text-cyan-12
  color $cyan-12

.text-cyan-13
  color $cyan-13

.text-cyan-14
  color $cyan-14

.text-teal
  color $teal

.text-teal-1
  color $teal-1

.text-teal-2
  color $teal-2

.text-teal-3
  color $teal-3

.text-teal-4
  color $teal-4

.text-teal-5
  color $teal-5

.text-teal-6
  color $teal-6

.text-teal-7
  color $teal-7

.text-teal-8
  color $teal-8

.text-teal-9
  color $teal-9

.text-teal-10
  color $teal-10

.text-teal-11
  color $teal-11

.text-teal-12
  color $teal-12

.text-teal-13
  color $teal-13

.text-teal-14
  color $teal-14

.text-green
  color $green

.text-green-1
  color $green-1

.text-green-2
  color $green-2

.text-green-3
  color $green-3

.text-green-4
  color $green-4

.text-green-5
  color $green-5

.text-green-6
  color $green-6

.text-green-7
  color $green-7

.text-green-8
  color $green-8

.text-green-9
  color $green-9

.text-green-10
  color $green-10

.text-green-11
  color $green-11

.text-green-12
  color $green-12

.text-green-13
  color $green-13

.text-green-14
  color $green-14

.text-light-green
  color $light-green

.text-light-green-1
  color $light-green-1

.text-light-green-2
  color $light-green-2

.text-light-green-3
  color $light-green-3

.text-light-green-4
  color $light-green-4

.text-light-green-5
  color $light-green-5

.text-light-green-6
  color $light-green-6

.text-light-green-7
  color $light-green-7

.text-light-green-8
  color $light-green-8

.text-light-green-9
  color $light-green-9

.text-light-green-10
  color $light-green-10

.text-light-green-11
  color $light-green-11

.text-light-green-12
  color $light-green-12

.text-light-green-13
  color $light-green-13

.text-light-green-14
  color $light-green-14

.text-lime
  color $lime

.text-lime-1
  color $lime-1

.text-lime-2
  color $lime-2

.text-lime-3
  color $lime-3

.text-lime-4
  color $lime-4

.text-lime-5
  color $lime-5

.text-lime-6
  color $lime-6

.text-lime-7
  color $lime-7

.text-lime-8
  color $lime-8

.text-lime-9
  color $lime-9

.text-lime-10
  color $lime-10

.text-lime-11
  color $lime-11

.text-lime-12
  color $lime-12

.text-lime-13
  color $lime-13

.text-lime-14
  color $lime-14

.text-yellow
  color $yellow

.text-yellow-1
  color $yellow-1

.text-yellow-2
  color $yellow-2

.text-yellow-3
  color $yellow-3

.text-yellow-4
  color $yellow-4

.text-yellow-5
  color $yellow-5

.text-yellow-6
  color $yellow-6

.text-yellow-7
  color $yellow-7

.text-yellow-8
  color $yellow-8

.text-yellow-9
  color $yellow-9

.text-yellow-10
  color $yellow-10

.text-yellow-11
  color $yellow-11

.text-yellow-12
  color $yellow-12

.text-yellow-13
  color $yellow-13

.text-yellow-14
  color $yellow-14

.text-amber
  color $amber

.text-amber-1
  color $amber-1

.text-amber-2
  color $amber-2

.text-amber-3
  color $amber-3

.text-amber-4
  color $amber-4

.text-amber-5
  color $amber-5

.text-amber-6
  color $amber-6

.text-amber-7
  color $amber-7

.text-amber-8
  color $amber-8

.text-amber-9
  color $amber-9

.text-amber-10
  color $amber-10

.text-amber-11
  color $amber-11

.text-amber-12
  color $amber-12

.text-amber-13
  color $amber-13

.text-amber-14
  color $amber-14

.text-orange
  color $orange

.text-orange-1
  color $orange-1

.text-orange-2
  color $orange-2

.text-orange-3
  color $orange-3

.text-orange-4
  color $orange-4

.text-orange-5
  color $orange-5

.text-orange-6
  color $orange-6

.text-orange-7
  color $orange-7

.text-orange-8
  color $orange-8

.text-orange-9
  color $orange-9

.text-orange-10
  color $orange-10

.text-orange-11
  color $orange-11

.text-orange-12
  color $orange-12

.text-orange-13
  color $orange-13

.text-orange-14
  color $orange-14

.text-deep-orange
  color $deep-orange

.text-deep-orange-1
  color $deep-orange-1

.text-deep-orange-2
  color $deep-orange-2

.text-deep-orange-3
  color $deep-orange-3

.text-deep-orange-4
  color $deep-orange-4

.text-deep-orange-5
  color $deep-orange-5

.text-deep-orange-6
  color $deep-orange-6

.text-deep-orange-7
  color $deep-orange-7

.text-deep-orange-8
  color $deep-orange-8

.text-deep-orange-9
  color $deep-orange-9

.text-deep-orange-10
  color $deep-orange-10

.text-deep-orange-11
  color $deep-orange-11

.text-deep-orange-12
  color $deep-orange-12

.text-deep-orange-13
  color $deep-orange-13

.text-deep-orange-14
  color $deep-orange-14

.text-brown
  color $brown

.text-brown-1
  color $brown-1

.text-brown-2
  color $brown-2

.text-brown-3
  color $brown-3

.text-brown-4
  color $brown-4

.text-brown-5
  color $brown-5

.text-brown-6
  color $brown-6

.text-brown-7
  color $brown-7

.text-brown-8
  color $brown-8

.text-brown-9
  color $brown-9

.text-brown-10
  color $brown-10

.text-brown-11
  color $brown-11

.text-brown-12
  color $brown-12

.text-brown-13
  color $brown-13

.text-brown-14
  color $brown-14

.text-grey
  color $grey

.text-grey-1
  color $grey-1

.text-grey-2
  color $grey-2

.text-grey-3
  color $grey-3

.text-grey-4
  color $grey-4

.text-grey-5
  color $grey-5

.text-grey-6
  color $grey-6

.text-grey-7
  color $grey-7

.text-grey-8
  color $grey-8

.text-grey-9
  color $grey-9

.text-grey-10
  color $grey-10

.text-grey-11
  color $grey-11

.text-grey-12
  color $grey-12

.text-grey-13
  color $grey-13

.text-grey-14
  color $grey-14

.text-blue-grey
  color $blue-grey

.text-blue-grey-1
  color $blue-grey-1

.text-blue-grey-2
  color $blue-grey-2

.text-blue-grey-3
  color $blue-grey-3

.text-blue-grey-4
  color $blue-grey-4

.text-blue-grey-5
  color $blue-grey-5

.text-blue-grey-6
  color $blue-grey-6

.text-blue-grey-7
  color $blue-grey-7

.text-blue-grey-8
  color $blue-grey-8

.text-blue-grey-9
  color $blue-grey-9

.text-blue-grey-10
  color $blue-grey-10

.text-blue-grey-11
  color $blue-grey-11

.text-blue-grey-12
  color $blue-grey-12

.text-blue-grey-13
  color $blue-grey-13

.text-blue-grey-14
  color $blue-grey-14


.bg-red
  background-color $red

.bg-red-1
  background-color $red-1

.bg-red-2
  background-color $red-2

.bg-red-3
  background-color $red-3

.bg-red-4
  background-color $red-4

.bg-red-5
  background-color $red-5

.bg-red-6
  background-color $red-6

.bg-red-7
  background-color $red-7

.bg-red-8
  background-color $red-8

.bg-red-9
  background-color $red-9

.bg-red-10
  background-color $red-10

.bg-red-11
  background-color $red-11

.bg-red-12
  background-color $red-12

.bg-red-13
  background-color $red-13

.bg-red-14
  background-color $red-14

.bg-pink
  background-color $pink

.bg-pink-1
  background-color $pink-1

.bg-pink-2
  background-color $pink-2

.bg-pink-3
  background-color $pink-3

.bg-pink-4
  background-color $pink-4

.bg-pink-5
  background-color $pink-5

.bg-pink-6
  background-color $pink-6

.bg-pink-7
  background-color $pink-7

.bg-pink-8
  background-color $pink-8

.bg-pink-9
  background-color $pink-9

.bg-pink-10
  background-color $pink-10

.bg-pink-11
  background-color $pink-11

.bg-pink-12
  background-color $pink-12

.bg-pink-13
  background-color $pink-13

.bg-pink-14
  background-color $pink-14

.bg-purple
  background-color $purple

.bg-purple-1
  background-color $purple-1

.bg-purple-2
  background-color $purple-2

.bg-purple-3
  background-color $purple-3

.bg-purple-4
  background-color $purple-4

.bg-purple-5
  background-color $purple-5

.bg-purple-6
  background-color $purple-6

.bg-purple-7
  background-color $purple-7

.bg-purple-8
  background-color $purple-8

.bg-purple-9
  background-color $purple-9

.bg-purple-10
  background-color $purple-10

.bg-purple-11
  background-color $purple-11

.bg-purple-12
  background-color $purple-12

.bg-purple-13
  background-color $purple-13

.bg-purple-14
  background-color $purple-14

.bg-deep-purple
  background-color $deep-purple

.bg-deep-purple-1
  background-color $deep-purple-1

.bg-deep-purple-2
  background-color $deep-purple-2

.bg-deep-purple-3
  background-color $deep-purple-3

.bg-deep-purple-4
  background-color $deep-purple-4

.bg-deep-purple-5
  background-color $deep-purple-5

.bg-deep-purple-6
  background-color $deep-purple-6

.bg-deep-purple-7
  background-color $deep-purple-7

.bg-deep-purple-8
  background-color $deep-purple-8

.bg-deep-purple-9
  background-color $deep-purple-9

.bg-deep-purple-10
  background-color $deep-purple-10

.bg-deep-purple-11
  background-color $deep-purple-11

.bg-deep-purple-12
  background-color $deep-purple-12

.bg-deep-purple-13
  background-color $deep-purple-13

.bg-deep-purple-14
  background-color $deep-purple-14

.bg-indigo
  background-color $indigo

.bg-indigo-1
  background-color $indigo-1

.bg-indigo-2
  background-color $indigo-2

.bg-indigo-3
  background-color $indigo-3

.bg-indigo-4
  background-color $indigo-4

.bg-indigo-5
  background-color $indigo-5

.bg-indigo-6
  background-color $indigo-6

.bg-indigo-7
  background-color $indigo-7

.bg-indigo-8
  background-color $indigo-8

.bg-indigo-9
  background-color $indigo-9

.bg-indigo-10
  background-color $indigo-10

.bg-indigo-11
  background-color $indigo-11

.bg-indigo-12
  background-color $indigo-12

.bg-indigo-13
  background-color $indigo-13

.bg-indigo-14
  background-color $indigo-14

.bg-blue
  background-color $blue

.bg-blue-1
  background-color $blue-1

.bg-blue-2
  background-color $blue-2

.bg-blue-3
  background-color $blue-3

.bg-blue-4
  background-color $blue-4

.bg-blue-5
  background-color $blue-5

.bg-blue-6
  background-color $blue-6

.bg-blue-7
  background-color $blue-7

.bg-blue-8
  background-color $blue-8

.bg-blue-9
  background-color $blue-9

.bg-blue-10
  background-color $blue-10

.bg-blue-11
  background-color $blue-11

.bg-blue-12
  background-color $blue-12

.bg-blue-13
  background-color $blue-13

.bg-blue-14
  background-color $blue-14

.bg-light-blue
  background-color $light-blue

.bg-light-blue-1
  background-color $light-blue-1

.bg-light-blue-2
  background-color $light-blue-2

.bg-light-blue-3
  background-color $light-blue-3

.bg-light-blue-4
  background-color $light-blue-4

.bg-light-blue-5
  background-color $light-blue-5

.bg-light-blue-6
  background-color $light-blue-6

.bg-light-blue-7
  background-color $light-blue-7

.bg-light-blue-8
  background-color $light-blue-8

.bg-light-blue-9
  background-color $light-blue-9

.bg-light-blue-10
  background-color $light-blue-10

.bg-light-blue-11
  background-color $light-blue-11

.bg-light-blue-12
  background-color $light-blue-12

.bg-light-blue-13
  background-color $light-blue-13

.bg-light-blue-14
  background-color $light-blue-14

.bg-cyan
  background-color $cyan

.bg-cyan-1
  background-color $cyan-1

.bg-cyan-2
  background-color $cyan-2

.bg-cyan-3
  background-color $cyan-3

.bg-cyan-4
  background-color $cyan-4

.bg-cyan-5
  background-color $cyan-5

.bg-cyan-6
  background-color $cyan-6

.bg-cyan-7
  background-color $cyan-7

.bg-cyan-8
  background-color $cyan-8

.bg-cyan-9
  background-color $cyan-9

.bg-cyan-10
  background-color $cyan-10

.bg-cyan-11
  background-color $cyan-11

.bg-cyan-12
  background-color $cyan-12

.bg-cyan-13
  background-color $cyan-13

.bg-cyan-14
  background-color $cyan-14

.bg-teal
  background-color $teal

.bg-teal-1
  background-color $teal-1

.bg-teal-2
  background-color $teal-2

.bg-teal-3
  background-color $teal-3

.bg-teal-4
  background-color $teal-4

.bg-teal-5
  background-color $teal-5

.bg-teal-6
  background-color $teal-6

.bg-teal-7
  background-color $teal-7

.bg-teal-8
  background-color $teal-8

.bg-teal-9
  background-color $teal-9

.bg-teal-10
  background-color $teal-10

.bg-teal-11
  background-color $teal-11

.bg-teal-12
  background-color $teal-12

.bg-teal-13
  background-color $teal-13

.bg-teal-14
  background-color $teal-14

.bg-green
  background-color $green

.bg-green-1
  background-color $green-1

.bg-green-2
  background-color $green-2

.bg-green-3
  background-color $green-3

.bg-green-4
  background-color $green-4

.bg-green-5
  background-color $green-5

.bg-green-6
  background-color $green-6

.bg-green-7
  background-color $green-7

.bg-green-8
  background-color $green-8

.bg-green-9
  background-color $green-9

.bg-green-10
  background-color $green-10

.bg-green-11
  background-color $green-11

.bg-green-12
  background-color $green-12

.bg-green-13
  background-color $green-13

.bg-green-14
  background-color $green-14

.bg-light-green
  background-color $light-green

.bg-light-green-1
  background-color $light-green-1

.bg-light-green-2
  background-color $light-green-2

.bg-light-green-3
  background-color $light-green-3

.bg-light-green-4
  background-color $light-green-4

.bg-light-green-5
  background-color $light-green-5

.bg-light-green-6
  background-color $light-green-6

.bg-light-green-7
  background-color $light-green-7

.bg-light-green-8
  background-color $light-green-8

.bg-light-green-9
  background-color $light-green-9

.bg-light-green-10
  background-color $light-green-10

.bg-light-green-11
  background-color $light-green-11

.bg-light-green-12
  background-color $light-green-12

.bg-light-green-13
  background-color $light-green-13

.bg-light-green-14
  background-color $light-green-14

.bg-lime
  background-color $lime

.bg-lime-1
  background-color $lime-1

.bg-lime-2
  background-color $lime-2

.bg-lime-3
  background-color $lime-3

.bg-lime-4
  background-color $lime-4

.bg-lime-5
  background-color $lime-5

.bg-lime-6
  background-color $lime-6

.bg-lime-7
  background-color $lime-7

.bg-lime-8
  background-color $lime-8

.bg-lime-9
  background-color $lime-9

.bg-lime-10
  background-color $lime-10

.bg-lime-11
  background-color $lime-11

.bg-lime-12
  background-color $lime-12

.bg-lime-13
  background-color $lime-13

.bg-lime-14
  background-color $lime-14

.bg-yellow
  background-color $yellow

.bg-yellow-1
  background-color $yellow-1

.bg-yellow-2
  background-color $yellow-2

.bg-yellow-3
  background-color $yellow-3

.bg-yellow-4
  background-color $yellow-4

.bg-yellow-5
  background-color $yellow-5

.bg-yellow-6
  background-color $yellow-6

.bg-yellow-7
  background-color $yellow-7

.bg-yellow-8
  background-color $yellow-8

.bg-yellow-9
  background-color $yellow-9

.bg-yellow-10
  background-color $yellow-10

.bg-yellow-11
  background-color $yellow-11

.bg-yellow-12
  background-color $yellow-12

.bg-yellow-13
  background-color $yellow-13

.bg-yellow-14
  background-color $yellow-14

.bg-amber
  background-color $amber

.bg-amber-1
  background-color $amber-1

.bg-amber-2
  background-color $amber-2

.bg-amber-3
  background-color $amber-3

.bg-amber-4
  background-color $amber-4

.bg-amber-5
  background-color $amber-5

.bg-amber-6
  background-color $amber-6

.bg-amber-7
  background-color $amber-7

.bg-amber-8
  background-color $amber-8

.bg-amber-9
  background-color $amber-9

.bg-amber-10
  background-color $amber-10

.bg-amber-11
  background-color $amber-11

.bg-amber-12
  background-color $amber-12

.bg-amber-13
  background-color $amber-13

.bg-amber-14
  background-color $amber-14

.bg-orange
  background-color $orange

.bg-orange-1
  background-color $orange-1

.bg-orange-2
  background-color $orange-2

.bg-orange-3
  background-color $orange-3

.bg-orange-4
  background-color $orange-4

.bg-orange-5
  background-color $orange-5

.bg-orange-6
  background-color $orange-6

.bg-orange-7
  background-color $orange-7

.bg-orange-8
  background-color $orange-8

.bg-orange-9
  background-color $orange-9

.bg-orange-10
  background-color $orange-10

.bg-orange-11
  background-color $orange-11

.bg-orange-12
  background-color $orange-12

.bg-orange-13
  background-color $orange-13

.bg-orange-14
  background-color $orange-14

.bg-deep-orange
  background-color $deep-orange

.bg-deep-orange-1
  background-color $deep-orange-1

.bg-deep-orange-2
  background-color $deep-orange-2

.bg-deep-orange-3
  background-color $deep-orange-3

.bg-deep-orange-4
  background-color $deep-orange-4

.bg-deep-orange-5
  background-color $deep-orange-5

.bg-deep-orange-6
  background-color $deep-orange-6

.bg-deep-orange-7
  background-color $deep-orange-7

.bg-deep-orange-8
  background-color $deep-orange-8

.bg-deep-orange-9
  background-color $deep-orange-9

.bg-deep-orange-10
  background-color $deep-orange-10

.bg-deep-orange-11
  background-color $deep-orange-11

.bg-deep-orange-12
  background-color $deep-orange-12

.bg-deep-orange-13
  background-color $deep-orange-13

.bg-deep-orange-14
  background-color $deep-orange-14

.bg-brown
  background-color $brown

.bg-brown-1
  background-color $brown-1

.bg-brown-2
  background-color $brown-2

.bg-brown-3
  background-color $brown-3

.bg-brown-4
  background-color $brown-4

.bg-brown-5
  background-color $brown-5

.bg-brown-6
  background-color $brown-6

.bg-brown-7
  background-color $brown-7

.bg-brown-8
  background-color $brown-8

.bg-brown-9
  background-color $brown-9

.bg-brown-10
  background-color $brown-10

.bg-brown-11
  background-color $brown-11

.bg-brown-12
  background-color $brown-12

.bg-brown-13
  background-color $brown-13

.bg-brown-14
  background-color $brown-14

.bg-grey
  background-color $grey

.bg-grey-1
  background-color $grey-1

.bg-grey-2
  background-color $grey-2

.bg-grey-3
  background-color $grey-3

.bg-grey-4
  background-color $grey-4

.bg-grey-5
  background-color $grey-5

.bg-grey-6
  background-color $grey-6

.bg-grey-7
  background-color $grey-7

.bg-grey-8
  background-color $grey-8

.bg-grey-9
  background-color $grey-9

.bg-grey-10
  background-color $grey-10

.bg-grey-11
  background-color $grey-11

.bg-grey-12
  background-color $grey-12

.bg-grey-13
  background-color $grey-13

.bg-grey-14
  background-color $grey-14

.bg-blue-grey
  background-color $blue-grey

.bg-blue-grey-1
  background-color $blue-grey-1

.bg-blue-grey-2
  background-color $blue-grey-2

.bg-blue-grey-3
  background-color $blue-grey-3

.bg-blue-grey-4
  background-color $blue-grey-4

.bg-blue-grey-5
  background-color $blue-grey-5

.bg-blue-grey-6
  background-color $blue-grey-6

.bg-blue-grey-7
  background-color $blue-grey-7

.bg-blue-grey-8
  background-color $blue-grey-8

.bg-blue-grey-9
  background-color $blue-grey-9

.bg-blue-grey-10
  background-color $blue-grey-10

.bg-blue-grey-11
  background-color $blue-grey-11

.bg-blue-grey-12
  background-color $blue-grey-12

.bg-blue-grey-13
  background-color $blue-grey-13

.bg-blue-grey-14
  background-color $blue-grey-14

label
  user-select none
  cursor pointer


.shadow-transition
  transition $shadow-transition

.no-shadow, .shadow-0
  box-shadow none
.inset-shadow
  box-shadow $inset-shadow

.shadow-1, .hoverable:hover, .hoverable-1:hover
  box-shadow $shadow-1
.shadow-2, .hoverable-2:hover
  box-shadow $shadow-2
.shadow-3, .hoverable-3:hover
  box-shadow $shadow-3
.shadow-4, .hoverable-4:hover
  box-shadow $shadow-4
.shadow-5, .hoverable-5:hover
  box-shadow $shadow-5

.flex
  display flex
  &.inline
    display inline-flex

.row
  display flex
  flex-direction row
  &.inline
    display inline-flex
.reverse-row
  display flex
  flex-direction row-reverse
  &.inline
    display inline-flex

.column
  display flex
  flex-direction column
  &.inline
    display inline-flex
.reverse-column
  display flex
  flex-direction column-reverse
  &.inline
    display inline-flex

.flex, .row, .column
  &.small-gutter
    margin (- $layout-small-gutter) 0 $layout-small-gutter (- $layout-small-gutter)
    > div
      padding $layout-small-gutter 0 0 $layout-small-gutter

  &.medium-gutter, &.gutter
    margin (- $layout-medium-gutter) 0 $layout-medium-gutter (- $layout-medium-gutter)
    > div
      padding $layout-medium-gutter 0 0 $layout-medium-gutter

  &.big-gutter
    margin (- $layout-big-gutter) 0 $layout-big-gutter (- $layout-big-gutter)
    > div
      padding $layout-big-gutter 0 0 $layout-big-gutter

  &.large-gutter
    margin (- $layout-large-gutter) 0 $layout-large-gutter (- $layout-large-gutter)
    > div
      padding $layout-large-gutter 0 0 $layout-large-gutter


.order-first
  order -1000
.order-last
  order 1000
for i in 0..10
  .order-{i}
    order i
  .grow-{i}
    flex-grow i
  .shrink-{i}
    flex-shrink i

.auto
  flex 1 1 auto

for $cols in (1..5)
  for $parts in (1..$cols)
    &.width-{$parts}of{$cols}
      flex 0 1 ($parts / $cols * 100)%
    &.offset-{$parts}of{$cols}
      margin-left ($parts / $cols * 100)%


.sm, .gt-sm, .md, .lt-md, .gt-md, .bg, .lt-bg, .gt-bg, .lg, .lt-lg
  display none

.wrap
  flex-wrap wrap
.no-wrap
  flex-wrap nowrap
.reverse-wrap
  flex-wrap wrap-reverse

+prefix-classes('justify-')
  &.start
    justify-content flex-start
  &.end
    justify-content flex-end
  &.center
    justify-content center
  &.between
    justify-content space-between
  &.around
    justify-content space-around

+prefix-classes('items-')
  &.start
    align-items flex-start
  &.end
    align-items flex-end
  &.center
    align-items center
  &.baseline
    align-items baseline
  &.stretch
    align-items stretch

+prefix-classes('content-')
  &.start
    align-content flex-start
  &.end
    align-content flex-end
  &.center
    align-content center
  &.between
    align-content space-between
  &.around
    align-content space-around

+prefix-classes('self-')
  &.start
    align-self flex-start
  &.end
    align-self flex-end
  &.center
    align-self center
  &.baseline
    align-self baseline
  &.stretch
    align-self stretch


flex-media-query($type)
  .{$type}
    display block
    &.inline
      display inline-block
    &.flex
      display flex
      &.inline
        display inline-flex

  .{$type}-hide
    display none

  .{$type}-auto
    @extend .auto

  for $cols in (1..5)
    for $parts in (1..$cols)
      .{$type}-width-{$parts}of{$cols}
        flex 0 1 ($parts / $cols * 100)%
      .{$type}-offset-{$parts}of{$cols}
        margin-left ($parts / $cols * 100)%

  .{$type}-order-first
    order -1000
  .{$type}-order-last
    order 1000

  for i in 1..10
    .{$type}-order-{i}
      order i
    .{$type}-grow-{i}
      flex-grow i
    .{$type}-shrink-{i}
      flex-shrink i

  .{$type}-row
    display flex
    flex-direction row
    &.inline
      display inline-flex
  .{$type}-reverse-row
    display flex
    flex-direction row-reverse
    &.inline
      display inline-flex
  .{$type}-column
    display flex
    flex-direction column
    &.inline
      display inline-flex
  .{$type}-reverse-column
    display flex
    flex-direction column-reverse
    &.inline
      display inline-flex

  .flex, .row, .column
    &.{$type}-small-gutter
      margin (- $layout-small-gutter) 0 $layout-small-gutter (- $layout-small-gutter)
      > div
        padding $layout-small-gutter 0 0 $layout-small-gutter
    &.{$type}-medium-gutter, &.{$type}-gutter
      margin (- $layout-medium-gutter) 0 $layout-medium-gutter (- $layout-medium-gutter)
      > div
        padding $layout-medium-gutter 0 0 $layout-medium-gutter
    &.{$type}-big-gutter
      margin (- $layout-big-gutter) 0 $layout-big-gutter (- $layout-big-gutter)
      > div
        padding $layout-big-gutter 0 0 $layout-big-gutter
    &.{$type}-large-gutter
      margin (- $layout-large-gutter) 0 $layout-large-gutter (- $layout-large-gutter)
      > div
        padding $layout-large-gutter 0 0 $layout-large-gutter

@media only screen and (max-width $layout-small-max)
  flex-media-query('sm')
@media only screen and (min-width $layout-medium-min)
  flex-media-query('gt-sm')

@media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
  flex-media-query('md')
@media only screen and (min-width $layout-big-min)
  flex-media-query('gt-md')
@media only screen and (max-width $layout-small-max)
  flex-media-query('lt-md')

@media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
  flex-media-query('bg')
@media only screen and (min-width $layout-large-min)
  flex-media-query('gt-bg')
@media only screen and (max-width $layout-medium-max)
  flex-media-query('lt-bg')

@media only screen and (min-width $layout-large-min)
  flex-media-query('lg')
@media only screen and (max-width $layout-big-max)
  flex-media-query('lt-lg')



.group
  display inline-block
  margin 5px
  > *
    margin-left -5px
    margin-right -5px
    &:first-of-type
      border-radius $button-border-radius 0 0 $button-border-radius
    &:last-of-type
      border-radius 0 $button-border-radius $button-border-radius 0

.backdrop
  display none
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  width 100vw
  height 100vh
  background-color transparent
  transition background-color .28s ease-in
  &.active
    display block
    background-color $backdrop-background-color

.background-cover
  background-repeat no-repeat
  background-size cover
  background-position center center

.round-borders
  border-radius $generic-border-radius

.non-selectable
  user-select none

.scroll
  -webkit-overflow-scrolling touch
  overflow auto
  will-change scroll-position
.no-scroll
  overflow hidden !important

.no-pointer-events
  pointer-events none
.all-pointer-events
  pointer-events all

.cursor-pointer
  cursor pointer

.spin
  animation quasar-spin 2s infinite linear
.blink
  animation quasar-blink 1s steps(5, start) infinite
.rotate-90
  transform rotate(90deg)
.rotate-180
  transform rotate(180deg)
.rotate-270
  transform rotate(270deg)
.flip-horizontal
  transform scale(-1, 1)
.flip-vertical
  transform scale(1, -1)

@keyframes quasar-blink
  to
    visibility hidden

@keyframes quasar-spin
  0%
    transform rotate(0deg)
  100%
    transform rotate(359deg)

.pull-left
  float left
.pull-right
  float right

.no-margin
  margin 0 !important
.no-padding
  padding 0 !important

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

.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

.fullscreen
  position fixed
  top 0
  right 0
  bottom 0
  left 0

+prefix-classes('float-')
  .left
    float left
  .right
    float right

.fit
  width 100%
  height 100%
.full-height
  height 100%
.full-width
  width 100%

.window-height
  margin-top 0
  margin-bottom 0
  height 100vh
.window-width
  margin-left 0
  margin-right 0
  width 100vw

.block
  @extend .full-width
  display block

/*
 * Normalizing -- credits go to Normalize.css 4
 */

*, *:before, *:after // @stylint ignore
  box-sizing inherit
  -webkit-tap-highlight-color transparent
  -moz-tap-highlight-color transparent

html, body, #quasar-app
  height 100%
  width 100%
  margin 0
  box-sizing border-box

/* iPad Input Shadows */
input[type='text'], input[type='email'], input[type='search'], input[type='password']
  -webkit-appearance none
  -moz-appearance none /* mobile firefox too! */

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary
  display block

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls])
  display none
  height 0

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title]
  border-bottom none /* 1 */
  text-decoration underline /* 2 */
  text-decoration underline dotted /* 2 */

/**
 * Add the correct font style in Android 4.3-.
 */

dfn
  font-style italic

img
  border-style none

/**
 * Hide the overflow in IE.
 */

svg:not(:root)
  overflow hidden

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, pre, samp
  font-family monospace, monospace /* 1 */
  font-size 1em /* 2 */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr
  box-sizing content-box /* 1 */
  height 0 /* 1 */
  overflow visible /* 2 */

/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */

button,
input,
select,
textarea
  font inherit
  margin 0

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup
  font-weight bold

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */

button,
input, /* 1 */
select /* 2 */
  overflow visible

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, input::-moz-focus-inner
  border 0
  padding 0

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, input:-moz-focusring
  outline 1px dotted ButtonText

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea
  overflow auto

/**
 * Correct the odd appearance of search inputs in Chrome and Safari.
 */

input[type='search']
  -webkit-appearance textfield

/**
 * Remove the inner padding and cancel buttons in Chrome on OS X and
 * Safari on OS X.
 */

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration
  -webkit-appearance none



/*
 * Now Typography!
 */

body
  overflow hidden
  min-width 320px
  background $background-color
  font-family $typography-font-family
  color $text-color
  -ms-text-size-adjust 100%
  -webkit-text-size-adjust 100%
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-smoothing antialiased


a
  color $link-color
  text-decoration none
  cursor pointer
  outline 0
  transition color .25s
  &:hover
    color $link-color-active
  &:active, &:hover
    outline-width 0

h1, h2, h3, h4, h5, h6
  padding 0
  line-height 1.5
  &:first-child
    margin-top 0
  &:last-child
    margin-bottom 0

h1
  font-size (2.6 * $typography-font-size)
  min-height 1rem
  margin (@font-size / 3) 0 .5rem 0

h2
  font-size (2.2 * $typography-font-size)
  letter-spacing 1.7px
  margin (@font-size / 2) 0 .5rem 0

h3
  font-size (2 * $typography-font-size)
  font-weight 500
  letter-spacing 1.5px
  margin (@font-size / 2) 0 .5rem 0

h4
  font-size (1.6 * $typography-font-size)
  font-weight 400
  letter-spacing 2px
  margin (@font-size / 2) 0 .5rem 0

h5
  font-size (1.4 * $typography-font-size)
  font-weight 300
  letter-spacing 1px
  margin (@font-size / 2) 0 .5rem 0

h6
  font-size (1.4 * $typography-font-size)
  font-weight 300
  font-style italic
  margin (@font-size / 2) 0 .5rem 0

p
  margin $typography-p-margin
  line-height $typography-p-line-height
  &.caption
    font-size 1.2rem
    font-weight 300
    margin-bottom 2rem
  &:first-child
    margin-top 0
  &:last-child
    margin-bottom 0

@media screen and (max-width: $layout-medium-max)
  h1
    font-size (1.6 * $typography-font-size)
  h2
    font-size (1.4 * $typography-font-size)
  h3
    font-size (1.2 * $typography-font-size)
  h4, h5, h6
    font-size (1.1 * $typography-font-size)
  p.caption
    font-size 1.1rem

.uppercase
  text-transform uppercase
.lowercase
  text-transform lowercase
.capitalize
  text-transform capitalize

+prefix-classes('text-')
  .center
    text-align center
  .left
    text-align left
  .right
    text-align right
  .justify
    text-align justify
    hyphens auto

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

.light-paragraph
  font-weight 300
.thin-paragraph
  font-weight 200

small
  font-size 80%
big
  font-size 170%
sub
  bottom -.25em
sup
  top -.5em

.strong
  font-weight bold
.emphasize
  font-style italic

blockquote
  padding 10px 20px
  margin 0 0 20px
  font-size 17.5px
  border-left 5px solid $primary
  &.text-right
    padding-right 15px
    padding-left 0
    border-right 5px solid $primary
    border-left 0
    text-align right

  small
    display block
    line-height 1.4
    color $faded
    &:before
      content '\2014 \00A0'

dt
  font-weight bold
dd
  margin-left 0
dt, dd
  line-height 1.4
dl
  margin-top 0
  margin-bottom 20px
  &.horizontal
    dt
      float left
      width 25%
      clear left
      text-align right
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    dd
      margin-left 30%



::-webkit-selection,
::-moz-selection,
::selection
  background-color $primary
  color alpha(opposite-non-color($primary), .87)

textarea::-webkit-selection,
input::-webkit-selection,
textarea::-moz-selection,
input::-moz-selection,
textarea::selection,
input::selection
  background-color alpha($primary, .4)
  color alpha(opposite-non-color($primary), .87)

*:-webkit-full-screen // @stylint ignore
  width 100%
  height 100%

.disabled
  opacity .4 !important
  cursor not-allowed !important
.hidden
  display none !important
.invisible
  visibility hidden
.transparent
  background-color transparent

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


@keyframes quasar-highlight
  0%
    background $lime-6
  100%
    background transparent

.highlight-and-fade
  animation quasar-highlight 2s


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

if $theme == 'ios'
  .quasar-action-sheet
    border-radius $action-sheet-border-radius
    background-color $action-sheet-background-color
    max-width $action-sheet-max-width
    margin-left auto
    margin-right auto
    margin-bottom $action-sheet-margin-bottom
    overflow hidden

    .list
      margin 0
    .item-link
      font-size $action-sheet-font-size


.badge
  display inline-flex
  flex-direction row
  align-items center
  min-width 10px
  border-radius $badge-border-radius
  padding $badge-padding-vertical $badge-padding-horizontal
  font-size 1rem
  line-height 1
  white-space nowrap
  text-align center
  vertical-align middle

  > .left-detail, > .right-detail
    display inline-block
    vertical-align middle
    height 100%
    padding $badge-padding-vertical ($badge-padding-horizontal / 2)
    margin (- $badge-padding-vertical) ($badge-padding-horizontal / 2)
    background-color alpha(black, .1)
    opacity .8

  > .left-detail
    margin-left - $badge-padding-horizontal
    padding-left $badge-padding-horizontal
    border-radius $badge-border-radius 0 0 $badge-border-radius

  > .right-detail
    margin-right - $badge-padding-horizontal
    padding-right $badge-padding-horizontal
    border-radius 0 $badge-border-radius $badge-border-radius 0


ul.breadcrumb
  list-style none
  display inline-flex
  flex-wrap nowrap
  margin ($breadcrumb-height / 3) 0 0 0
  padding 0

  i
    font-size 1.7em

  li
    float left
    margin-bottom ($breadcrumb-height / 3)
    a
      color white
      display block
      background $breadcrumb-primary
      text-decoration none
      position relative
      height $breadcrumb-height
      line-height $breadcrumb-height
      padding 0 10px 0 5px

      text-align center
      margin-right 23px

    &:nth-child(even) a
      background-color $breadcrumb-secondary
      &:before
        border-color $breadcrumb-secondary
        border-left-color transparent
      &:after
        border-left-color $breadcrumb-secondary

    &:first-child a
      padding-left $breadcrumb-separator
      border-radius $breadcrumb-radius 0 0 $breadcrumb-radius
      &:before
        border 0

    &:last-child a
      padding-right $breadcrumb-separator
      border-radius 0 $breadcrumb-radius $breadcrumb-radius 0
      &:after
        border 0

    a
      &:before, &:after
        content ''
        position absolute
        top 0
        border 0 solid $breadcrumb-primary
        border-width ($breadcrumb-height / 2) 10px
        width 0
        height 0

      &:before
        left (- $breadcrumb-separator)
        border-left-color transparent

      &:after
        left 100%
        border-color transparent
        border-left-color $breadcrumb-primary

      &:active
        background-color $breadcrumb-active
        &:before
          border-color $breadcrumb-active
          border-left-color transparent
        &:after
          border-left-color $breadcrumb-active

body.desktop ul.breadcrumb a
  &:hover
    background-color $breadcrumb-hover
    &:before
      border-color $breadcrumb-hover
      border-left-color transparent
    &:after
      border-left-color $breadcrumb-hover

button, .button
  @extend .non-selectable

  display inline-flex
  flex-direction row
  justify-content center
  align-items center
  align-content center
  flex-wrap nowrap
  flex-shrink 0

  outline 0
  border 0
  cursor pointer
  text-decoration none
  position relative
  font-style normal
  text-align center
  text-overflow ellipsis
  white-space nowrap
  overflow hidden
  vertical-align middle
  color inherit
  background-color transparent
  line-height 1
  transition all .12s ease-in
  -webkit-appearance button

  border-radius $button-border-radius
  text-transform $button-text-transform

  margin $button-margin
  padding $button-padding
  min-height $button-min-height

  font-weight $button-font-weight
  font-size $button-font-size

  i
    font-size $button-icon-size
    &.on-left
      margin-right $button-icon-margin
    &.on-right
      margin-left $button-icon-margin

  &.small
    font-size $button-small-font-size
    padding $button-small-padding
    min-height $button-small-min-height
    i
      font-size $button-small-icon-size
  &.big
    font-size $button-big-font-size
    padding $button-big-padding
    min-height $button-big-min-height
    i
      font-size $button-big-icon-size

  &.round
    border-radius 64px
    padding 0 2.6rem

  &.raised
    box-shadow $shadow-2
    &:active:not(.disabled)
      box-shadow $shadow-3

  for $name, $color in $colors
    &.{$name}
      color white
      background-color $color

      &:active:not(.disabled)
        background-color active-color($color) !important
      &.outline
        border 1px solid $color
      &.glossy
        border 1px solid
        border-color darken($color, 10%) darken($color, 15%) darken($color, 15%)
        background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04))
        &:active:not(.disabled)
          background darken($color, 5%)
          border-color darken($color, 25%) darken($color, 20%) darken($color, 10%)
          box-shadow inset 0 1px 3px rgba(black, .2), 0 1px rgba(white, .4)
          background-image linear-gradient(to bottom, darken($color, 13%), lighten($color, 5%))

      &.clear, &.outline
        color $color
        background-color transparent
        &:active:not(.disabled)
          color white
          background-color $color !important

  &.clear
    border-radius 0

  &.light
    color $dark !important

  &.circular
    text-align center
    border-radius 50%
    padding 0
    height $button-circular-size
    width $button-circular-size
    line-height $button-circular-size
    &.small
      height $button-small-circular-size
      width $button-small-circular-size
      line-height $button-small-circular-size
    &.big
      height $button-big-circular-size
      width $button-big-circular-size
      line-height $button-big-circular-size

  &.block, &.full-width
    margin-left 0
    margin-right 0

body.desktop
  button, .button
    &.raised
      &:hover:not(.disabled)
        box-shadow $shadow-3

    for $name, $color in $colors
      &.{$name}:not(.disabled)
        &:hover:not(.clear):not(.glossy)
          background-color hover-color($color)
          box-shadow $button-box-shadow
        &.clear:hover
          background-color lighten($color, 70%)
        &.outline:hover
          color white

.card
  width 100%
  margin-bottom 20px
  border-radius $card-border-radius
  box-shadow $card-box-shadow
  display block
  overflow hidden
  position relative

  > img, .card-media img
    display block
    width 100%
    max-width 100%
    border 0

  .video:first-child, .video:first-child iframe
    border-radius $card-border-radius $card-border-radius 0 0

  > ul.collapsible
    margin 0

.card-content
  line-height 1.4
  padding $card-padding-vertical $card-padding-horizontal

.card-title
  font-size 1.3rem
  font-weight 500
  padding $card-padding-horizontal

  button
    margin 0

.card .list
  margin 0
  &.bordered
    border 0
    border-top 2px solid $grey-2
.card-title + .card-content
  padding-top 0

.card-actions
  padding $card-padding-vertical $card-padding-horizontal
  display flex
  flex-direction row
  align-items center
  font-size 80%
  > *:not(:last-child) // @stylint ignore
    padding-right $card-padding-horizontal

.card-media
  position relative
  > button
    margin 0
    position absolute
    bottom - ($button-circular-size / 2)
    right (2 * $card-padding-horizontal)

.card-no-top-padding
  padding-top 0 !important
.card-force-top-padding
  padding-top $card-padding-vertical !important

.chat-you, .chat-other
  margin 45px 0 0 0
  font-weight $chat-font-weight

  .chat-user
    margin -30px 0 0 0
    display block
    img
      width 65px
      height 65px
      border-radius 50%
      box-shadow $chat-box-shadow

  .chat-date
    font-size $chat-date-font-size
    color $chat-date-color

  .chat-message
    display block
    p
      display inline-block
      padding 10px
      position relative
      font-size $chat-message-font-size
      border-radius 3px
      box-shadow $chat-box-shadow
      &:after
        content ''
        position absolute
        top 0
        border-left 17px solid transparent
        border-right 17px solid transparent

.chat-you
  .chat-user
    float right
  .chat-date
    float right
    margin -20px 10px 0 0
  .chat-message
    margin 0 90px 0 0
    text-align right
    p
      margin 0 0 0 auto
      color $chat-message-you-color
      background-color $chat-message-you-background-color
      &:after
        content ''
        right 0
        margin 0 -15px 0 0
        border-top 17px solid $chat-message-you-background-color

.chat-other
  .chat-user
    float left
  .chat-date
    float left
    margin -20px 0 0 10px
  .chat-message
    margin 0 0 0 90px
    p
      color $chat-message-other-color
      background-color $chat-message-other-background-color
      &:after
        content ''
        left 0
        margin 0 0 0 -15px
        border-top 17px solid $chat-message-other-background-color

$checkbox-tick-top        = ($checkbox-size / 6)
$checkbox-tick-left       = ($checkbox-size / 6)
$checkbox-tick-width      = (.26 * $checkbox-size)
$checkbox-tick-height     = (.55 * $checkbox-size)

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

  input
    display none !important

  input + div
    position relative

    &:before
      border $checkbox-border-width solid $form-darker-color
    &:before, &:after
      content ''
      position absolute
      top 0
      left 0
      width $checkbox-size
      height $checkbox-size
      transition all .3s ease
      border-radius $checkbox-border-radius

  input:checked + div
    &:before
      background-color $form-active-color
      border $checkbox-border-width solid $form-active-color
    &:after
      top $checkbox-tick-top
      left $checkbox-tick-left
      width $checkbox-tick-width
      height $checkbox-tick-height
      border-top none
      border-left none
      border-right $checkbox-tick-thickness solid white
      border-bottom $checkbox-tick-thickness solid white
      transform rotate(45deg)
      transform-origin 100% 100%
      border-radius 0

ul.collapsible
  margin .5em 0 1em 0
  padding 0
  list-style-type none

  > li
    list-style-type none

    > div:first-child
      display block
      cursor pointer
      min-height 3em
      line-height 3em
      padding 0 1.5em
      border-bottom $collapsible-border
      background-color $collapsible-header-background-color
      i
        width 2em
        font-size 1.7em
        margin-right .8em

    > div:last-child
      max-height 0
      opacity 0
      overflow hidden
      transition all .3s

      &.card
        margin 0
        border-radius 0
        box-shadow none

    &.active
      border-bottom $collapsible-border
      > div:last-child
        padding 2em
        max-height 9999px
        opacity 1

    &:last-child
      border-bottom 0

  &:not(.popout)
    border-top $collapsible-border
    border-right $collapsible-border
    border-left $collapsible-border
    box-shadow $shadow-2

  &.popout
    > li
      margin 0 24px
      transition all .35s cubic-bezier(.25, .46, .45, .94)
      border-bottom 0
      box-shadow $shadow-2

      > div:first-child
        border-bottom $collapsible-border

      &.active
        margin 16px 0
        box-shadow $shadow-4


.drawer
  position relative
  overflow-y none

.drawer-backdrop
  display none
  z-index $z-drawer
  &.active
    display block

.drawer-opener
  z-index ($z-marginals - 1)
  height 100%
  width 15px

.drawer-content
  will-change transform
  background-color $drawer-background-color
  top 0
  bottom 0
  width $drawer-width
  font-size $drawer-font-size

  &.left-side
    left 0
    if $theme == 'ios'
      padding $ios-drawer-padding-left
  &.right-side
    right 0
    if $theme == 'ios'
      padding $ios-drawer-padding-right

.left-drawer-toggle, .right-drawer-toggle
  cursor pointer

swipe-behavior()
  .drawer-content
    z-index $z-drawer
    position fixed
    &.left-side
      transform translateX(- $drawer-width)
      if $theme == 'ios'
        box-shadow $ios-drawer-shadow-left
    &.right-side
      transform translateX($drawer-width)
      if $theme == 'ios'
        box-shadow $ios-drawer-shadow-right

@media screen and (max-width: $layout-small-max)
  swipe-behavior()

@media screen and (min-width: $layout-medium-min)
  .left-drawer-toggle, .right-drawer-toggle
    &:not(.always-visible)
      display none !important
  .drawer
    &.swipe-only
      swipe-behavior()
    &:not(.swipe-only)
      flex 0 0 $drawer-width

      .drawer-content
        left 0
        right 0
        position absolute !important
        transform translateX(0) !important

.quasar-dropdown-menu
  position fixed
  background-color $dropdown-background-color
  min-width $dropdown-min-width
  max-height $dropdown-max-height
  overflow auto
  z-index $z-dropdown
  box-shadow $dropdown-box-shadow
  .list
    margin 0

.quasar-dropdown
  display inline-block

.quasar-dropdown-target
  cursor pointer

$fab-size      = (1.2 * $button-circular-size)
$fab-translate = 2 * $fab-size

.quasar-fab
  height $fab-size
  width $fab-size
  position relative
  vertical-align middle

  &.opened

    .quasar-fab-actions
      opacity 1
      transform scaleX(1) scaleY(1) translateX(0) translateY(0)
      pointer-events all
    .quasar-fab-icon
      transform rotate3d(0, 0, 1, 180deg)
      opacity 0
    .quasar-fab-active-icon
      transform rotate3d(0, 0, 1, 0deg)
      opacity 1
    .backdrop
      display block
      background-color rgba(255, 255, 255, .5)

    &.with-backdrop
      z-index $z-fab

.quasar-fab-icon, .quasar-fab-active-icon
  position absolute
  top 0
  left ($fab-size / 4)
  transition opacity .4s, transform .4s
.quasar-fab-icon
  opacity 1
  transform rotate3d(0, 0, 1, 0deg)
.quasar-fab-active-icon
  opacity 0
  transform rotate3d(0, 0, 1, -180deg)

.quasar-fab-actions
  position absolute
  margin 0
  opacity 0
  transition all .2s ease-in
  pointer-events none

  &.right
    transform scaleX(.4) scaleY(.4) translateX(- $fab-translate)
    height $fab-size
    left $fab-size
    flex-direction row
  &.left
    transform scaleX(.4) scaleY(.4) translateX($fab-translate)
    height $fab-size
    right $fab-size
    flex-direction row-reverse
  &.up
    transform scaleX(.4) scaleY(.4) translateY($fab-translate)
    width $fab-size
    flex-direction column-reverse
    justify-content center
    bottom $fab-size
    right 0
  &.down
    transform scaleX(.4) scaleY(.4) translateY(- $fab-translate)
    width $fab-size
    flex-direction column
    justify-content center
    top $fab-size
    left 0

.quasar-gallery
  width 100%
  display flex
  flex-flow row wrap

  div
    flex auto
    width 150px
    margin 0 12px 12px 0
    &.quasar-gallery-main
      flex-basis 200%

  img
    height auto
    width 100%

.quasar-gallery-slider img
  height auto
  width 100%

.quasar-gallery-slider-quickview
  position absolute
  bottom -101%
  left 0
  right 0
  will-change bottom
  transition all .3s
  width 100%
  height auto
  max-height 60%
  overflow auto
  background-color black
  padding-top .5rem
  padding-bottom 2.2rem
  box-shadow 0 -3px 6px rgba(0, 0, 0, .16), 0 -5px 6px rgba(0, 0, 0, .23)
  text-align center

  &.active
    bottom 0

  img
    opacity .5
    will-change opacity
    transition opacity .3s
    cursor pointer

  div
    margin 1px 2px
    width 100px
    display inline-block

    &.active img, img.active
      opacity 1
      border 1px solid white

body.desktop .quasar-gallery-slider-quickview img:hover
  opacity 1

@font-face
  font-family 'Material Icons'
  font-style normal
  font-weight 400
  src local('Material Icons'), local('MaterialIcons-Regular'), url('../assets/fonts/icons/MaterialIcons-Regular.woff') format('woff')

i
  @extend .non-selectable

  display inline-flex
  box-sizing content-box
  font-family $icon-font-family
  font-weight $icon-font-weight
  font-style $icon-font-style
  text-transform $icon-text-transform
  vertical-align middle
  letter-spacing normal
  word-wrap normal
  white-space nowrap
  direction ltr

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing antialiased
  /* Support for Safari and Chrome. */
  text-rendering optimizeLegibility

  /* Support for Firefox. */
  -moz-osx-font-smoothing grayscale

  /* Support for IE. */
  font-feature-settings 'liga'

.quasar-grid-table
  th
    user-select none
  .sortable-column
    cursor pointer

.grid-top-controls input
  width 150px

@media only screen and (max-width $layout-small-max)
  .grid-top-controls
    margin-bottom 1rem
  .grid-bottom-controls
    margin-top 1rem

input, textarea
  padding $input-padding-vertical $input-padding-horizontal
  border 0
  outline 0
  transition all .3s
  border-bottom 2px solid transparent

input
  border-bottom 2px solid $form-darker-color
  &:focus
    border-bottom 2px solid $form-active-color

textarea
  height 11em
  width 100%
  box-shadow $shadow-1
  border 2px solid transparent
  &:focus
    border 2px solid $form-active-color
    box-shadow $shadow-2

.item
  input
    display flex
    flex-direction row
    flex 1 1 auto
    width 100%

    box-shadow none
    border-bottom 2px solid transparent
    &:focus
      border-bottom 2px solid $form-active-color

  &.fixed-label label
    flex 0 0 33%
  &.inline-label label input
    margin-left 1rem
  &.floating-label
    .item-content
      position relative
    label
      position absolute
      left 0
      bottom $input-padding-vertical
      pointer-events none
      transform-origin left top
      transform translateY(0) scale(1)
      transition transform .15s ease-in-out, color .3s
      will-change transform
    input
      margin-top 1.7rem
    input:focus ~ label, input:valid ~ label
      transform translateY(-2rem) scale(.8)
      color $form-active-color
  &.stacked-label
    .item-content
      position relative
    label
      position absolute
      top .7rem
      left 0
      transform scale(.9)
      transition color .3s
    input
      margin-top 1.7rem
    input:focus ~ label
      color $form-active-color

.item
  position relative
  text-transform none
  text-decoration none
  text-align initial
  font-weight normal
  box-shadow none
  display flex
  align-items center
  margin 0
  padding 0 $item-margin
  border 0
  width 100%
  min-height $item-min-height
  overflow hidden
  font-size $item-font-size
  transition all .3s

  &.active
    color $item-active-color
    background-color $item-active-background-color
  &.item-link
    cursor pointer
    transition all .3s
    &:not(.active):hover
      background-color $list-divider-color

  i
    line-height 1
    font-size (5px + $generic-input-size)
    min-height (5px + $generic-input-size)

  .item-value
    color $item-value-color
  .item-left-margin
    margin-left $item-margin
  .item-right-margin
    margin-right $item-margin

  img
    border 0

  .item-content
    display flex
    flex-direction row
    flex 1 1 auto
    align-items center
    align-self stretch
    margin-left $item-margin
    margin-right - $item-margin
    padding-right $item-margin
    p
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
      margin 0
      padding 0
      font-size ($item-font-size / 1.1)
      color $item-description-color
    p.item-title
      font-size $item-font-size
      color inherit
    button
      margin-right (5px - $item-margin)

  .item-label
    margin-top 10px
    margin-bottom 10px
    flex 1 1 auto
    white-space nowrap
    text-overflow ellipsis
    overflow hidden

  .item-avatar img
    max-width 3rem
    max-height 3rem
    border-radius 50%

  .item-thumbnail
    margin 8px 0
    min-width 4rem
    min-height 4rem
    img
      max-width 4rem
      max-height 4rem

  .item-swipe
    position absolute
    top 0
    right 0
    bottom 0
    z-index -1

  .item-swipe + .item-content
    background-color white

list-inner-delimiter()
  .item + .item:not(.active)
    .item-content
      border-top 1px solid $list-divider-color
  .item:not(.active) + .list-header
    border-top 1px solid $list-divider-color
  .list-header
    border-bottom 1px solid $list-divider-color

list-item-delimiter()
  .item:not(.active) + .list-header,
  .item:not(.active) + .item,
  .item + .item:not(.active)
    border-top 1px solid $list-divider-color
  .list-header
    border-bottom 1px solid $list-divider-color

list-top-bottom-bordered()
  border-width 1px 0 1px 0
  border-style solid
  border-color $list-divider-color


.list
  margin $list-margin

  .list-header
    font-size $list-header-font-size
    text-transform $list-header-text-transform
    font-weight bold
    color $list-header-color
    background-color $list-header-background-color
    padding 16px
    &.inverted
      color $list-header-background-color
      background-color $list-header-color

  .list-divider
    margin 5px 0
    height 1px
    background-color $list-divider-color
    border 0
    padding 0

  &.inset
    margin $list-inset-margin
    border-radius $generic-border-radius
    .item:first-child
      border-top-width 0
      border-top-right-radius $generic-border-radius
      border-top-left-radius $generic-border-radius
    .item:last-child
      border-bottom-width 0
      border-bottom-right-radius $generic-border-radius
      border-bottom-left-radius $generic-border-radius

  &.inner-delimiter
    list-inner-delimiter()
  &.item-delimiter
    list-item-delimiter()

  &.bordered
    border 1px solid $list-divider-color

  &.striped > *:nth-child(odd), &.highlight > .item:hover // @stylint ignore
    background-color $list-stripe-color

  &.top-bottom-bordered
    list-top-bottom-bordered()

  if $theme == 'ios'
    &.platform-delimiter
      list-item-delimiter()
      list-top-bottom-bordered()

img.responsive
  max-width 100%
  height auto

.video
  position relative
  padding-bottom 56.25%
  height 0
  overflow hidden

  iframe, object, embed
    position absolute
    top 0
    left 0
    width 100%
    height 100%


minimized-modal()
  max-width 80vw
  max-height 80vh

maximized-modal()
  width 100vw
  height 100vh
  max-width 100vw
  max-height 100vh
  border-radius 0
  .screen
    position relative

.modal-content
  background-color $modal-background-color
  border-radius $modal-border-radius
  box-shadow $shadow-4
  overflow-y auto
  min-width 280px
  max-height 80vh

  .modal-header
    text-align $modal-header-text-align
    padding $modal-header-padding
    font-size $modal-header-font-size
    font-weight 500

  .modal-body
    text-align $modal-body-text-align
    padding $modal-body-padding
    color $modal-body-color
  .modal-controls
    border-top 1px solid $form-darker-color
    border-bottom 1px solid $form-darker-color
    &.list
      margin 0

  .small-modal-scroll, .modal-scroll, .big-modal-scroll
    @extend .scroll
  .small-modal-scroll
    max-height (.65 * $modal-scroll-size)
  .modal-scroll
    max-height $modal-scroll-size
  .big-modal-scroll
    max-height (2 * $modal-scroll-size)


  .modal-buttons
    padding $modal-buttons-padding
    display flex
    flex-direction row

  &.minimized
    minimized-modal()
  &.maximized
    maximized-modal()

@media screen and (max-width $layout-small-max)
  .modal-content:not(.minimized)
    maximized-modal()

$notify-primary = $secondary
$notify-secondary = lighten($notify-primary, 20%)

#__quasar_notifiers
  position fixed
  z-index $z-notifier

.quasar-notifier
  opacity .9
  will-change transform
  color white
  background-color $notify-primary
  font-size 1rem

  a
    color $yellow

  img
    max-height 30px
    max-width 30px

  > div
    margin 5px

  > i
    font-size 1.5em
    line-height 1em

  .quasar-notifier-dismiss-all
    display none
    font-size 1.5rem
    line-height 1rem
    padding 5px
    color $notify-primary
    margin-left .5rem
    border-radius 7px
    background-color $notify-secondary

  &:first-of-type
    .quasar-notifier-dismiss-all
      display inherit

@media (max-width: $layout-small-max)
  #__quasar_notifiers
    left 0
    right 0

  body.mat #__quasar_notifiers
    bottom 0
  body.ios #__quasar_notifiers
    top 0

  .quasar-notifier
    padding 10px 16px
    min-width 100%
    float left
    box-shadow none !important
    border-top 1px solid $notify-secondary

@media (min-width: $layout-medium-min)
  #__quasar_notifiers
    pointer-events none
    top 60px
    left 25px
    right 25px

  .quasar-notifier
    pointer-events all
    border-radius 5px
    max-width $layout-medium-min
    min-width ($layout-medium-min / 2.5)
    padding 5px 16px
    margin 5px 16px 5px auto
    border 3px solid $notify-secondary
    box-shadow $shadow-3

.quasar-number
  box-shadow $shadow-1
  vertical-align middle
  padding 0 15px

  i
    cursor pointer

  input
    border-bottom 0 !important
    box-shadow none
    &:focus
      box-shadow none

.item .quasar-number
  box-shadow none
  padding 0

.quasar-parallax
  position relative
  width 100%
  overflow hidden

.quasar-parallax-image
  position absolute
  top 0
  right 0
  bottom 0
  left 0

  img
    visibility hidden
    position absolute
    left 50%
    top 0
    min-width 100%
    min-height 100%
    z-index -1

    &.ready
      visibility visible

.quasar-progress-bar
  position relative
  height 4px
  display block
  width 100%
  background-color $progress-bar-track-color
  border-radius $progress-bar-border-radius
  background-clip padding-box
  margin $progress-bar-margin
  overflow hidden

  &:not(.indeterminate) > div
    position absolute
    top 0
    bottom 0
    background-color $primary
    border-radius $progress-bar-border-radius
    transition width .3s linear

  &.animate
    > div
      animation quasar-progress-bar-stripes 2s linear infinite

  &.indeterminate > div
    background-color $progress-bar-default-track-color

    &:before, &:after
      content ''
      position absolute
      background-color inherit
      top 0
      left 0
      bottom 0
      will-change left, right

    &:before
      animation quasar-progress-bar-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
    &:after
      animation quasar-progress-bar-indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite
      animation-delay 1.15s

  &.stripe
    > div, > div:before, > div:after
      background-image linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)
      background-size 40px 40px

  for $name, $color in $colors
    &.{$name}
      > div
        background-color $color

body.desktop .quasar-progress-bar
  height $progress-bar-track-desktop-height

@keyframes quasar-progress-bar-indeterminate
  0%
    left -35%
    right 100%
  60%
    left 100%
    right -90%
  100%
    left 100%
    right -90%

@keyframes quasar-progress-bar-indeterminate-short
  0%
    left -200%
    right 100%
  60%
    left 107%
    right -8%
  100%
    left 107%
    right -8%

@keyframes quasar-progress-bar-stripes
  from
    background-position 40px 0
  to
    background-position 0 0

.pull-to-refresh
  overflow hidden
  position relative

.pull-to-refresh-container
  touch-action pan-x pan-y !important

.pull-to-refresh-message
  height 65px
  color $pull-to-refresh-color
  font-size $pull-to-refresh-font-size
  i
    font-size $pull-to-refresh-icon-size
    transition all .3s


.quasar-range
  padding-right $range-thumb-size
  height $range-height
  position relative
  cursor pointer
  display inline-block
  width 100%
  vertical-align middle

  &:before
    content ''
    position absolute
    top (($range-height - $range-track-height) / 2)
    height $range-track-height
    width 100%
    background-color $range-track-color
    transition background .7s ease

.quasar-range-container
  position relative

.quasar-range-thumb
  position absolute
  top (($range-height - $range-thumb-size) / 2)
  width $range-thumb-size
  height $range-thumb-size
  background-color $range-color
  border-radius $range-thumb-radius
  box-shadow $range-thumb-box-shadow
  transition $range-transition

.quasar-range.active
  &:before
    background-color $range-active-track-color
  .quasar-range-thumb
    top (($range-height - $range-active-thumb-size) / 2)
    width $range-active-thumb-size
    height $range-active-thumb-size

.quasar-rating i
  color $rating-grade-color
  text-shadow $rating-shadow
  cursor pointer
  &.active
    color $rating-active-grade-color

.quasar-page
  min-height 100%

.screen .quasar-pages
  @extend .auto
  position relative
  overflow hidden

.quasar-page-container
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  overflow auto

.screen-header
  order -10
.screen-footer
  order 10
.screen-navigation
  order $tabs-order

.screen-content
  overflow-y auto
  if $theme == 'ios'
    border-top $ios-screen-content-border
    border-bottom $ios-screen-content-border

.screen-header, .screen-footer, .screen-navigation
  z-index $z-marginals

.screen-navigation .tabs
  border-radius 0

.screen-header, .screen-footer, .screen-bar
  color $screen-marginals-color
  background-color $screen-marginals-background-color
  font-size $screen-marginals-font-size
  font-weight $screen-marginals-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in

.screen-header, .screen-footer
  > .row
    min-height $screen-row-min-height

  .group
    @extend .row.inline
    margin-left 10px
    margin-right 10px
    button
      padding-left 15px
      padding-right 15px

  .spacer
    @extend .auto

  p
    @extend .text-truncate, .text-center, .auto
    margin 0
    font-size $screen-marginals-font-size
    line-height $screen-marginals-font-size
    &:first-child
      margin-left 15px
    &:last-child
      margin-right 15px

    if $theme == 'mat'
      text-transform uppercase

  button i
    font-size $screen-marginals-icon-button-font-size

.screen-bar
  display flex
  justify-content center
  align-items center
  min-height $screen-row-min-height

  if $theme == 'mat'
    text-transform uppercase

/*
 * Smart Page Container
 */

.smart-container .quasar-page
  padding 2rem 0

@media only screen and (max-width $layout-small-max)
  .smart-container .quasar-page
    padding 1rem .5rem
@media only screen and (min-width $layout-medium-min) and (max-width $layout-medium-max)
  .smart-container .quasar-page
    width 95%
    max-width $layout-medium-min
    padding-left 1rem
@media only screen and (min-width $layout-big-min) and (max-width $layout-big-max)
  .smart-container .quasar-page
    width 85%
    max-width $layout-medium-min
    padding-left 3rem
@media only screen and (min-width $layout-large-min)
  .smart-container .quasar-page
    width 85%
    max-width $layout-big-min
    padding-left 4rem

.quasar-slider
  overflow hidden
  &.fullscreen
    z-index $z-absolute

.quasar-slider-inner
  position relative
  height 100%

.quasar-slider-track
  white-space nowrap
  padding 0
  margin 0
  will-change transform
  display flex
  flex-wrap nowrap
  height 100%

  > div
    flex 0 0 100%
    min-height $slider-min-height
    margin 0
    padding $slider-padding

    &.centered
      display flex
      flex-direction column
      align-items center
      justify-content center

  &.with-arrows
    > div
      padding-left 10%
      padding-right 10%
  &.with-toolbar
    > div
      padding-bottom ($slider-padding + 1rem)

.quasar-slider-left-button,
.quasar-slider-right-button
  position absolute
  top 0
  bottom 0
  font-size $slider-arrow-size
  width 10%
  max-width 70px
  pointer-events none
  i
    cursor pointer
    pointer-events all
    padding 3px
    border-radius 50%
    background-color $slider-ovelay-color
    opacity $slider-opacity
    transition opacity .3s
    &:hover
      opacity $slider-opacity-active
.quasar-slider-left-button
  left 0
.quasar-slider-right-button
  right 0

.quasar-slider-toolbar
  position absolute
  bottom 0
  left 0
  right 0
  margin 0
  z-index 1
  background-color $slider-ovelay-color
  opacity $slider-opacity
  padding .5rem .5rem
  transition opacity .3s
  &:hover
    opacity $slider-opacity-active
  i
    cursor pointer
    margin 0 .5rem
    font-size $slider-button-size
  .quasar-slider-dots i
    font-size $slider-dots-size

.quasar-spinner
  vertical-align middle

table
  border-collapse collapse
  border-spacing 0
  display table
  border 0
  width 100%

  &.bordered
    border $table-border
    th, td
      border-right $table-border

  &.inner-delimiter, &.bordered
    tr
      border-bottom $table-border

  thead
    border-bottom $table-head-border

  td, th
    padding 0
    border 0
    padding 15px 5px
    display table-cell
    text-align left
    vertical-align middle

  &.compact td
    padding 5px

  &.centered
    th, td
      text-align center


  &.striped
    > tbody > tr
      &:nth-child(odd)
        background-color $table-highlight-color
      > td
        border-radius 0


body.desktop table.highlight
  > tbody > tr, th
    transition background-color .25s ease
    &:hover
      background-color darken($table-highlight-color, 5%) !important


.tabs
  min-height 2rem
  overflow hidden

  color $tabs-color
  background-color $tabs-background-color
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in

  border-radius $generic-border-radius

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

  .left-scroll, .right-scroll
    height 100%
    min-width 25px
    cursor pointer
    color $tabs-active-color
    font-size (1.2 * $tabs-icon-font-size)

    &.disabled
      visibility hidden

  if $theme == 'ios'
    @extend .justify-center

body.mobile .tabs.scrollable
  .left-scroll, .right-scroll
    display none !important
  .spacer
    min-width 45%

.tabs-scroller
  overflow hidden

.tab
  display flex
  min-height 55px
  padding $tabs-padding
  cursor pointer
  transition all .3s
  white-space nowrap

  .tabs-icon
    font-size $tabs-icon-font-size
  .tabs-icon + .tabs-label
    margin $tabs-label-margin
  &.active
    color $tabs-active-color
  &:active
    background-color $tabs-highlight-color

  if $theme == 'mat'
    flex-direction row
    text-transform $mat-tabs-text-transform
    border-bottom $mat-tabs-border-bottom

    &.active
      border-bottom $mat-tabs-active-border-bottom

  if $theme == 'ios'
    flex-direction column


if $theme == 'mat'
  @media only screen and (max-width $layout-small-max)
    .tab
      &.hideIcon .tabs-icon,
      &.hideLabel .tabs-label
        display none !important

@media only screen and (max-width $layout-medium-max)
  .tabs:not(.scrollable)
    .tabs-scroller, .tab
      flex 1 1 auto

@media only screen and (min-width $layout-big-min)
  .tab
    padding-left (3 * $tabs-padding[1])
    padding-right (3 * $tabs-padding[1])

.quasar-tooltip
  position relative

  &:before, &:after
    position absolute
    bottom 101%
    left 50%
    z-index $z-tooltip
    pointer-events none
    opacity 0
    transition opacity .15s ease

  &:before
    content attr(quasar-tooltip)
    margin-bottom $tooltip-arrow-border-width
    margin-left (- $tooltip-width / 2)
    padding $tooltip-padding
    width $tooltip-width
    border-radius $tooltip-border-radius
    color $tooltip-color
    background-color $tooltip-background-color
    text-align center
    font-size $tooltip-font-size
    line-height $tooltip-line-height

  &:after
    content ' '
    margin-left (- $tooltip-arrow-border-width)
    width 0
    border-top $tooltip-arrow-border-width solid $tooltip-background-color
    border-right $tooltip-arrow-border-width solid transparent
    border-left $tooltip-arrow-border-width solid transparent

  &:hover
    &:before, &:after
      opacity 1

.quasar-toggle
  display inline-block
  height $toggle-height
  width $toggle-width
  vertical-align middle

  input
    display none

  input + div
    position relative

    &:before, &:after
      content ''
      position absolute
      transition all .3s ease

    &:before
      vertical-align middle
      top $toggle-area-top
      left $toggle-area-left
      width $toggle-area-width
      height $toggle-area-height

    &:after
      border-radius 50%
      top $toggle-handle-top
      left $toggle-handle-left
      width $toggle-handle-size
      height $toggle-handle-size
      background-color white

  input:checked + div
    &:after
      left $toggle-area-active-left

.quasar-tree
  li
    margin 0
    list-style-type none
    position relative
    padding 10px 5px 0 5px

    &:before
      content ''
      position absolute
      top 0
      width 1px
      height 100%
      right auto
      left -15px
      border-left 1px solid $tree-connector-color
      bottom 50px

    &:after
      content:''
      position absolute
      top 20px
      width 20px
      height 20px
      right auto
      left -15px
      border-top 1px solid $tree-connector-color

    &:last-child:before
      height 20px

  // Remove connectors before root
  > ul > li
    &:after, &:before
      border 0

.quasar-tree-expandable-item, .quasar-tree-link
  cursor pointer
  .quasar-tree-label:active
    color $tree-highlight-color
    background-color $tree-highlight-background-color

body.desktop
  .quasar-tree-expandable-item, .quasar-tree-link
    .quasar-tree-label:hover
      color $tree-highlight-color
      background-color $tree-highlight-background-color

.quasar-tree-label
  padding $tree-label-padding
  border-radius $tree-label-border-radius
