$headerPadding: 0.5rem 1rem
$headerBorderWidth: 1px
$headerBorderStyle: solid
$headerBorderColor: #aaaaaa
$headerBackground: #ff7a58
$headerColor: white

$weekdayPadding: 0.4rem 0
$weekdayColor: #7a7a7a
$weekdayBorderWidth: 1px
$weekdayBorderStyle: solid
$weekdayBorderColor: #aaaaaa
$weekdayBackground: #eaeaea

$dayBorder: solid 1px #aaaaaa
$dayBackground: white
$dayWidth: 14.2857%
$dayHeight: 50px

$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

*
  box-sizing: border-box

#app
  font-family: $fontFamily

.calendar
  display: flex
  flex-direction: column
  background: transparent
  margin: 10px

.header
  display: flex
  justify-content: stretch
  align-items: center
  color: $headerColor
  padding: $headerPadding
  border-width: $headerBorderWidth
  border-style: $headerBorderStyle
  border-color: $headerBorderColor
  background-color: $headerBackground

  =pointer()
    cursor: pointer
    &:hover
      color: #dcdcdc

  .arrow
    +pointer
    padding: 0 0.4em 0.3em 0.4em
    font-size: 1.8rem
    font-weight: 500
    user-select: none
    flex-grow: 0

  .title
    +pointer
    flex-grow: 1
    font-size: 1.2rem
    text-align: center

.weekdays
  display: flex
  flex: auto

.weekday
  width: $dayWidth
  display: flex
  justify-content: center
  align-items: center
  padding: $weekdayPadding
  color: $weekdayColor
  border-width: $weekdayBorderWidth
  border-style: $weekdayBorderStyle
  border-color: $weekdayBorderColor
  background-color: $weekdayBackground
  box-sizing: border-box

.week
  display: flex

.day
  width: $dayWidth
  height: $dayHeight
  display: flex
  justify-content: center
  align-items: center
  background-color: $dayBackground
  border: $dayBorder