@require "./_vars.styl"

@keyframes fpFadeInDown
  from
    opacity 0
    transform translate3d(0, -20px, 0)

  to
    opacity 1
    transform translate3d(0, 0, 0)

.flatpickr-calendar
  background transparent
  overflow hidden
  max-height 0
  opacity 0
  visibility hidden
  text-align center
  padding 0
  animation none
  direction ltr
  border 0
  display none
  font-size 14px
  line-height 24px
  border-radius 5px
  position absolute
  width $calendarWidth
  box-sizing border-box
  touch-action manipulation

  if $noCalendarBorder is defined
    box-shadow 0 3px 13px alpha(black, 0.08)

  else
    background $calendarBackground
    box-shadow 1px 0 0 $calendarBorderColor,
      -1px 0 0 $calendarBorderColor,
      0 1px 0 $calendarBorderColor,
      0 -1px 0 $calendarBorderColor,
      0 3px 13px alpha(black, 0.08)


  &.open, &.inline
    opacity 1
    visibility visible
    overflow visible
    max-height 640px

  &.open
    display inline-block
    z-index 99999

  &.animate.open
    animation fpFadeInDown 200ms $bezier

  &.inline
    display block
    position relative
    top 2px

  &.static
    position absolute
    top calc(100% + 2px)

    &.open
      z-index 999
      display block

  &.hasWeeks
    width auto

  .hasWeeks, .hasTime
    .dayContainer
      border-bottom 0
      border-bottom-right-radius 0
      border-bottom-left-radius 0

  if $noCalendarBorder
    .hasWeeks .dayContainer
      border-left 0

  &.showTimeInput.hasTime
    .flatpickr-time
      height $timeHeight
      border-top 1px solid $calendarBorderColor

    if $noCalendarBorder is defined
      .flatpickr-innerContainer
        border-bottom 0

      .flatpickr-time
        border 1px solid $calendarBorderColor

  &.noCalendar.hasTime
    .flatpickr-time
      height auto

  &:before, &:after
    position absolute
    display block
    pointer-events none
    border solid transparent
    content ''
    height 0
    width 0
    left 22px

  &.rightMost
    &:before, &:after
      left auto
      right 22px

  &:before
    border-width 5px
    margin 0 -5px

  &:after
    border-width 4px
    margin 0 -4px

  &.arrowTop
    &:before, &:after
      bottom 100%
    &:before
      border-bottom-color $calendarBorderColor
    &:after
      if $noCalendarBorder is defined
        border-bottom-color $monthBackground
      else
        border-bottom-color $calendarBackground

  &.arrowBottom
    &:before, &:after
      top 100%
    &:before
      border-top-color $calendarBorderColor
    &:after
      if $noCalendarBorder is defined
        border-top-color $monthBackground
      else
        border-top-color $calendarBackground

  &:focus
    outline 0

.flatpickr-wrapper
  position relative
  display inline-block

.flatpickr-month
  if $noCalendarBorder is defined
    border-radius 5px 5px 0 0
  background $monthBackground
  color $monthForeground
  fill $monthForeground
  height $monthNavHeight
  line-height 1
  text-align center
  position relative
  user-select none
  overflow hidden

.flatpickr-prev-month, .flatpickr-next-month
  text-decoration none
  cursor pointer
  position absolute
  top 0px
  line-height 16px
  height $monthNavHeight
  padding 10px calc(3.57% - 1.5px)
  z-index 3

  i
    position relative

  &.flatpickr-prev-month
    /*!
    /*rtl:begin:ignore*//*
    */
    left 0
    /*!
    /*rtl:end:ignore*//*
    */


  &.flatpickr-next-month
    /*!
    /*rtl:begin:ignore*//*
    */
    right 0
    /*!
    /*rtl:end:ignore*//*
    */

  &:hover
    color $todayColor
    svg
      if $arrow_hover_color is defined
        fill $arrow_hover_color

      else
        fill $todayColor

  svg
    width 14px
    height 14px

    path
      transition fill 0.1s
      fill inherit


.numInputWrapper
  position relative
  height auto

  input, span
    display inline-block

  input
    width 100%
    &::-ms-clear
      display none

  span
    position absolute
    right 0
    width 14px
    padding 0 4px 0 2px
    height 50%
    line-height 50%
    opacity 0
    cursor pointer
    border 1px solid alpha($dayForeground, 0.15)
    box-sizing border-box

    &:hover
      background: alpha($invertedBg, 0.1)

    &:active
      background: alpha($invertedBg, 0.2)

    &:after
      display block
      content ""
      position absolute
      //top 33%

    &.arrowUp
      top 0
      border-bottom 0

      &:after
        border-left 4px solid transparent
        border-right 4px solid transparent
        border-bottom 4px solid alpha($dayForeground, 0.6)
        top 26%

    &.arrowDown
      top 50%

      &:after
        border-left 4px solid transparent
        border-right 4px solid transparent
        border-top 4px solid alpha($dayForeground, 0.6)
        top 40%

    svg
      width inherit
      height auto
      path
        fill alpha($monthForeground, 0.5)

  &:hover
    background: alpha($invertedBg, 0.05)

    span
      opacity 1


.flatpickr-current-month
  font-size 135%
  line-height inherit
  font-weight 300
  color inherit
  position absolute
  width 75%
  left 12.5%
  padding (0.22*$monthNavHeight) 0 0 0
  line-height 1
  height $monthNavHeight
  display inline-block
  text-align center
  transform translate3d(0px, 0px, 0px)

  span.cur-month
    font-family inherit
    font-weight 700
    color inherit
    display inline-block
    margin-left 0.5ch
    padding 0

    &:hover
      background: alpha($invertedBg, 0.05)


  .numInputWrapper
    width 6ch
    width unquote("7ch\0")
    display inline-block

    span.arrowUp:after
      border-bottom-color $monthForeground

    span.arrowDown:after
      border-top-color $monthForeground

  input.cur-year
    background transparent
    box-sizing border-box
    color inherit
    cursor text
    padding 0 0 0 0.5ch
    margin 0
    display inline-block
    font-size inherit
    font-family inherit
    font-weight 300
    line-height inherit
    height auto
    border 0
    border-radius 0
    vertical-align initial

    &:focus
      outline 0

    &[disabled], &[disabled]:hover
      font-size 100%
      color alpha($monthForeground, 0.5)
      background transparent
      pointer-events none

.flatpickr-weekdays
  background $weekdaysBackground
  text-align center
  overflow hidden
  width 100%
  display flex
  align-items center
  height $weekdaysHeight

span.flatpickr-weekday
  cursor default
  font-size 90%
  background $monthBackground
  color $weekdaysForeground
  line-height 1
  margin 0
  text-align center
  display block
  flex 1
  font-weight bolder


.dayContainer, .flatpickr-weeks
  padding 1px 0 0 0

.flatpickr-days
  position: relative;
  overflow: hidden;
  display flex
  width $daysWidth

  &:focus
    outline 0

  if $noCalendarBorder is defined
    border-left 1px solid $calendarBorderColor
    border-right 1px solid $calendarBorderColor


.dayContainer
  padding 0
  outline 0
  text-align left
  width ($daysWidth)
  min-width ($daysWidth)
  max-width ($daysWidth)
  box-sizing border-box
  display inline-block
  display -ms-flexbox
  display flex
  flex-wrap wrap
  -ms-flex-wrap wrap
  -ms-flex-pack: justify
  justify-content space-around
  transform: translate3d(0px, 0px, 0px);
  opacity 1


.flatpickr-day
  background none
  border 1px solid transparent
  border-radius 150px
  box-sizing border-box
  color $dayForeground
  cursor pointer

  font-weight 400
  width 14.2857143%
  flex-basis 14.2857143%
  max-width $daySize
  height $daySize
  line-height $daySize
  margin 0

  display inline-block
  position relative
  justify-content center
  text-align center

  &, &.prevMonthDay, &.nextMonthDay
    &.inRange, &.today.inRange, &:hover, &:focus
      cursor pointer
      outline 0
      background $dayHoverBackground
      border-color $dayHoverBackground


  &.today
    border-color $todayColor

    &:hover, &:focus
      border-color $todayColor
      background $todayColor
      if $today_fg_color is defined
        color $today_fg_color
      else
        color white

  &.selected, &.startRange, &.endRange
    &, &.inRange, &:focus, &:hover, &.prevMonthDay, &.nextMonthDay
      background $selectedDayBackground
      box-shadow none

      if $selectedDayForeground is defined
        color $selectedDayForeground
      else
        color white

      border-color $selectedDayBackground

    &.startRange
      border-radius 50px 0 0 50px
      //box-shadow:  (2.5*$dayMargin) 0 0 $selectedDayBackground

    &.endRange
      border-radius 0 50px 50px 0
      //

    &.startRange + .endRange
      box-shadow: (-5*$dayMargin) 0 0 $selectedDayBackground

    &.startRange.endRange
      border-radius 50px

  &.inRange
    border-radius 0
    box-shadow: (-2.5*$dayMargin) 0 0 $dayHoverBackground, (2.5*$dayMargin) 0 0 $dayHoverBackground

  &.disabled, &.disabled:hover,
  &.prevMonthDay, &.nextMonthDay,
  &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay
    color alpha($dayForeground, 0.3)
    background transparent

    if $disabled_border_color is defined
      border-color $disabled_border_color

    else
      border-color transparent
    cursor default

  &.disabled, &.disabled:hover
    cursor not-allowed
    color alpha($dayForeground, 0.1)

  &.week.selected
    border-radius 0
    box-shadow: (-2.5*$dayMargin) 0 0 $selectedDayBackground,
      (2.5*$dayMargin) 0 0 $selectedDayBackground

.rangeMode .flatpickr-day
  margin-top 1px

.flatpickr-weekwrapper
  display inline-block
  float left

  .flatpickr-weeks
    padding 0 12px
    if $noCalendarBorder is defined
      border-left 1px solid $calendarBorderColor
    else
      box-shadow 1px 0 0 $calendarBorderColor

  .flatpickr-weekday
    float none
    width 100%
    line-height $weekdaysHeight

  span.flatpickr-day
    &, &:hover
      display block
      width 100%
      max-width none
      color alpha($dayForeground, 0.3)
      background transparent
      cursor default
      border none


.flatpickr-innerContainer
  display block
  display flex
  box-sizing border-box
  overflow: hidden;

  if $noCalendarBorder is defined
    background $calendarBackground
    border-bottom 1px solid $calendarBorderColor


.flatpickr-rContainer
  display inline-block
  padding 0
  box-sizing border-box


.flatpickr-time
  text-align center
  outline 0
  display block
  height 0 // hide initially
  line-height $timeHeight
  max-height $timeHeight
  box-sizing border-box
  overflow hidden
  display flex

  if $noCalendarBorder is defined
    background $calendarBackground
    border-radius 0 0 5px  5px

  &:after
    content ""
    display table
    clear both

  .numInputWrapper
    flex 1
    width 40%
    height $timeHeight
    float left

    span.arrowUp:after
      border-bottom-color $dayForeground

    span.arrowDown:after
      border-top-color $dayForeground

  &.hasSeconds .numInputWrapper
    width 26%

  &.time24hr .numInputWrapper
    width 49%

  input
    background transparent
    box-shadow none
    border 0
    border-radius 0
    text-align center
    margin 0
    padding 0
    height inherit
    line-height inherit
    cursor pointer
    color $dayForeground
    font-size 14px
    position relative
    box-sizing border-box

    &.flatpickr-hour
      font-weight bold

    &.flatpickr-minute, &.flatpickr-second
      font-weight 400

    &:focus
      outline 0
      border 0

  .flatpickr-time-separator, .flatpickr-am-pm
    height inherit
    display inline-block
    float left
    line-height inherit
    color $dayForeground
    font-weight bold
    width 2%
    user-select none
    align-self center

  .flatpickr-am-pm
    outline 0
    width 18%
    cursor pointer
    text-align center
    font-weight 400

    &:hover, &:focus
      background lighten($dayHoverBackground, 4)

.flatpickr-input[readonly]
  cursor pointer
