$arrow-size         = 8px
$selection-radius   = 0
$selection-margin   = 0

$base-grey          = $bz-grey
$shadow             = rgba($base-grey, 1)
$base-color         = $bz-blue
$highlight          = rgba($base-color, 1)

.DateRangePicker
  display inline-block
  padding 0
  position relative
  user-select none

  &__Legend
    color #52575e
    font-size 14px
    line-height 16px
    list-style-type none
    margin 20px 0
    padding 0

  &__LegendItem
    display inline-block
    margin 0 20px

  &__LegendItemColor
    border-radius 50%
    display inline-block
    height 14px
    margin-right 6px
    vertical-align text-bottom
    width 14px
    border 1px solid rgba(0, 0, 0, .25)

    &--selection
      background-color $highlight

  &__PaginationArrow
    border 0
    cursor pointer
    display block
    height 35px
    outline none
    overflow hidden
    padding 0
    position absolute
    text-align center
    top 0
    white-space nowrap
    width 35px
    z-index 1

    &--previous
      left 20px
    &--next
      right 20px
    // &:hover
    //   background-color $bz-black

  &__PaginationArrowIcon
    border-width $arrow-size
    border-style solid
    border-bottom-color transparent
    border-top-color transparent
    height 0
    position absolute
    top 10px
    width 0

    &--is-disabled
      opacity .25
    &--previous
      border-left-color transparent
      right (30px / 2) - ($arrow-size / 2)
    &--next
      border-right-color transparent
      left (30px / 2) - ($arrow-size / 2)

  &__Month
    color inherit
    display inline-block
    margin 0
    background-color $bz-grey--dark
    position relative
    user-select none
    width 275px

  &__MonthHeader
    font-size 14px
    font-weight 600
    height 35px
    line-height 35px
    position relative
    text-align center

  &__MonthHeaderLabel
    display inline-block
    position relative

  &__MonthHeaderSelect
    background #e4e4e4
    border 0
    cursor pointer
    display inline-block
    height 100%
    left 0
    margin 0
    opacity 0
    position absolute
    top 0
    width 100%
    z-index 5

  &__MonthDates
    border-bottom-width 1px
    border-bottom-style solid
    border-collapse collapse
    border-spacing 0
    margin 0
    width 100%

  &__WeekdayHeading,
  &__Date
    font-size 12px
    line-height 1
    padding 10px 0
    text-align center
    width 14.285714285714286%

  &__WeekdayHeading
    border-bottom-width 1px
    border-bottom-style solid

    abbr[title]
      border-bottom-width 0
      font-size inherit
      cursor default
      text-decoration none

  &__Date
    border-width 1px
    border-style solid
    cursor pointer
    overflow hidden
    position relative

    &:first-child
      border-left-width 1px

    &--otherMonth
      opacity .5

    &--is-disabled
      color red
      cursor default

    &--is-selected
      color $bz-white

    &--is-highlighted
      color $bz-white

  &__CalendarDatePeriod
    bottom 0
    position absolute
    top 0

    &--am
      left 0
      right 50%

    &--pm
      left 50%
      right 0

  &__CalendarSelection
    background-color $highlight
    border 1px solid darken($highlight, 5)
    bottom $selection-margin
    left 0
    position absolute
    right 0
    top $selection-margin

    &--inOtherMonth
      opacity .5

    &--start
      border-bottom-left-radius $selection-radius
      border-right-width 0
      border-top-left-radius $selection-radius
      left $selection-margin

    &--end
      border-bottom-right-radius $selection-radius
      border-left-width 0
      border-top-right-radius $selection-radius
      right $selection-margin

    &--segment
      border-left-width 0
      border-right-width 0

    &--single
      border-radius $selection-radius
      left $selection-margin
      right $selection-margin

    &--is-pending
      background-color $highlight
      border-width 0

  &__CalendarHighlight
    border 1px solid $bz-black
    bottom $selection-margin
    left 0
    position absolute
    right 0
    top $selection-margin

    &--inOtherMonth
      opacity .5

    &--start
      border-bottom-left-radius $selection-radius
      border-right-width 0
      border-top-left-radius $selection-radius
      left $selection-margin

    &--end
      border-bottom-right-radius $selection-radius
      border-left-width 0
      border-top-right-radius $selection-radius
      right $selection-margin

    &--segment
      border-left-width 0
      border-right-width 0

    &--single
      background-color transparent
      border 1px solid darken($highlight, 5)
      border-radius $selection-radius
      left $selection-margin
      right $selection-margin

  &__HalfDateStates
    bottom -50px
    left -50px
    position absolute
    right -50px
    top -50px
    transform rotate(30deg)

  &__FullDateStates
    bottom 0
    left 0
    position absolute
    right 0
    top 0

  &__DateLabel
    display block
    position relative
    text-align center
    width 100%
    z-index 1