@import '../constants'

TOTAL_WIDTH         = 330px

:local(.dialog)
  padding           : 0
  text-align        : center
  width             : TOTAL_WIDTH

  > nav
    margin-top      : 0
    padding-bottom  : 10px

:local(.header)
  background-color  : ACCENT
  color             : white

:local(.headerWeekday)
  background-color  : darken(ACCENT, 20%)
  display           : block
  font-size         : 14px
  line-height       : 1.8
  width             : 100%

:local(.headerMonth)
  cursor            : pointer
  display           : block
  font-size         : 18px
  padding           : 10px
  text-transform    : uppercase

:local(.headerDay)
  cursor            : pointer
  display           : block
  font-size         : 50px
  line-height       : 40px

:local(.headerYear)
  cursor            : pointer
  display           : block
  font-size         : 18px
  padding           : 10px

:local(.calendarWrapper)
  padding           : 10px 5px

:local(.dialog)
  &.display-years
    :local(.headerDay), :local(.headerMonth)
      opacity       : .7

  &.display-months :local(.headerYear)
    opacity         : .7