$black:         #000000 !default
$black-light:   #22252a !default
$black-lighter: #393d46 !default

$grey-darker:  #676d7e !default
$grey-dark:    #818798 !default
$grey:         #9499a8 !default
$grey-light:   #abafba !default
$grey-lighter: #c7c9d1 !default

$white-ter:    hsl(0, 0%, 96%) !default
$white-bis:    hsl(0, 0%, 98%) !default
$white:        hsl(0, 0%, 100%) !default

$theme: #66b3cc

$weight-light: 300 !default
$weight-normal: 400 !default
$weight-medium: 500 !default
$weight-semibold: 600 !default
$weight-bold: 700 !default

$size-3: 1.15rem
$size-4: 1.1rem
$size-5: 1rem
$size-6: 0.9rem !default
$size-7: 0.8rem !default

$radius-rounded: 290486px !default

$font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$font-weight: $weight-normal !default
$font-color: $black-lighter

$pane-width: 256px !default
$pane-horizontal-padding: 5px !default
$pane-border-color: $white-bis !default

$header-padding: 10px $pane-horizontal-padding + 5

$title-font-size: $size-3
$title-font-weight: $weight-normal
$title-translate-x: 25px
$title-transition: all .25s ease-in-out

$nav-title-font-size: $size-6
$nav-title-font-weight: $weight-medium
$nav-table-font-size: $size-6
$nav-table-font-weight: $weight-normal

$arrow-font-size: 1.6rem
$arrow-transition: fill-opacity .3s ease-in-out

$weekday-color: $grey
$weekday-font-size: $size-6
$weekday-font-weight: 500
$weekday-padding: 0 $pane-horizontal-padding

$weeks-padding: 5px $pane-horizontal-padding 7px $pane-horizontal-padding
$weeks-translate-x: 20px
$weeks-transition: all .25s ease-in-out

$day-min-height: 28px
$day-content-width: 1.8rem
$day-content-height: 1.8rem
$day-content-font-size: $size-6
$day-content-font-weight: $weight-normal
$day-content-border-radius: 50%
$day-content-transition-time: 0.18s ease-in-out
$day-popover-font-size: $size-7
$day-popover-font-weight: $weight-normal

$dot-diameter: 5px
$dot-background-color: $theme
$dot-border-radius: 50%
$dot-spacing: 3px

$bar-height: 3px
$bar-background-color: $theme
$bars-width: 75%

$background-transition-time: .13s ease-in-out
$background-scale-enter-animation-time: 0.14s
$background-scale-leave-animation-time: .18s
$background-translate-transition: .18s ease-in-out

$popover-slide-translation: 15px
$popover-transition-time: 0.14s ease-in-out
$popover-background-color: $white-bis
$popover-border: 1px solid rgba(34,36,38,.15)
$popover-border-radius: 5px
$popover-padding: 4px
$popover-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15)
$popover-caret-horizontal-offset: 20px
$popover-caret-vertical-offset: 18px

$enter-animation-time: .16s ease-in-out
$leave-animation-time: .2s ease-in-out
$scale-enter-animation: scaleEnter $enter-animation-time
$scale-leave-animation: scaleLeave $leave-animation-time
$slide-right-scale-enter-animation: slideRightScaleEnter $enter-animation-time
$slide-right-translate-enter-animation: slideRightTranslateEnter $enter-animation-time
$slide-left-scale-enter-animation: slideLeftScaleEnter $enter-animation-time
$slide-left-translate-enter-animation: slideLeftTranslateEnter $enter-animation-time
$fade-transition: opacity $leave-animation-time

// ANIMATION KEY FRAMES

@keyframes scaleEnter
  0%
    transform: scaleX(0.7) scaleY(0.7)
    opacity: 0.3
  90%
    transform: scaleX(1.1) scaleY(1.1)
  95%
    transform: scaleX(0.95) scaleY(0.95)
  100%
    transform: scaleX(1) scaleY(1)
    opacity: 1

@keyframes scaleLeave
  0%
    transform: scaleX(1) scaleY(1)
  60%
    transform: scaleX(1.18) scaleY(1.18)
    opacity: 0.2
  100%
    transform: scaleX(1.15) scaleY(1.18)
    opacity: 0

@keyframes slideRightScaleEnter
  0%
    transform: scaleX(0)
  60%
    transform: scaleX(1.08)

@keyframes slideRightTranslateEnter
  0%
    transform: translateX(-6px)
  60%
    transform: translateX(2px)

@keyframes slideLeftScaleEnter
  0%
    transform: scaleX(0)
  60%
    transform: scaleX(1.08)

@keyframes slideLeftTranslateEnter
  0%
    transform: translateX(6px)
  60%
    transform: translateX(-2px)