@import './_variables.scss'

.v-calendar-weekly
  width: 100%
  height: 100%
  display: flex
  flex-direction: column
  // https://github.com/vuetifyjs/vuetify/issues/8319
  min-height: 0
  // Themed
  background-color: #fff

.v-calendar__container
  border-top: $calendar-line-width solid $calendar-line-color
  border-left: $calendar-line-width solid $calendar-line-color
  border-right: $calendar-line-width solid $calendar-line-color

.v-calendar-weekly__head
  display: grid
  grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
  user-select: none
  &.days__0
    grid-template-columns: 1fr
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
  &.days__1
    grid-template-columns: 1fr
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
  &.days__2
    grid-template-columns: repeat(2, 1fr)
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr)
  &.days__3
    grid-template-columns: repeat(3, 1fr)
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr)
  &.days__4
    grid-template-columns: repeat(4, 1fr)
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr)
  &.days__5
    grid-template-columns: repeat(5, 1fr)
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr)
  &.days__6
    grid-template-columns: repeat(6, 1fr)
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
  &.days__7
    grid-template-columns: repeat(7, 1fr)
    &.v-calendar-weekly__head-weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)

.v-calendar-weekly__head-weekday, .v-calendar-weekly__head-weekday-with-weeknumber
  flex: 1 0 20px
  user-select: none
  padding: $calendar-weekly-weekday-padding
  font-size: $calendar-weekly-weekday-font-size
  overflow: hidden
  text-align: center
  text-overflow: ellipsis
  text-transform: uppercase
  white-space: nowrap
  // Themed
  border-right: $calendar-line-width solid $calendar-line-color

  &:last-child
    border-right: none

  // TODO change this
  > div .v-btn
    font-size: 1.5rem

.v-calendar-weekly__head-weeknumber
  background: $calendar-weekly-weeknumber-background
  color: $calendar-weekly-weeknumber-color

.v-calendar-weekly__week
  display: flex
  flex: 1
  height: unset
  // https://github.com/vuetifyjs/vuetify/issues/8319
  min-height: 0

.v-calendar-month__weeknumber
  padding-top: $calendar-weekly-weeknumber-padding-top
  background: $calendar-month-weeknumber-background
  border-bottom: $calendar-line-width solid $calendar-line-color
  color: $calendar-month-weeknumber-color
  text-align: center
  font-size: $calendar-weekly-weeknumber-font-size
  font-weight: $calendar-weekly-weeknumber-font-weight

.v-calendar-month__days
  display: grid
  flex: 1 1
  > .v-calendar-month__day
    min-height: $calendar-weekly-day-min-height
  &.days__0
    grid-template-columns: 1fr
    > .v-calendar-month__day
      border-right: none
  &.days__1
    grid-template-columns: 1fr
    > .v-calendar-month__day
      border-right: none
  &.days__2
    grid-template-columns: repeat(2, 1fr)
    > .v-calendar-month__day:nth-child(2n)
      border-right: none
  &.days__3
    grid-template-columns: repeat(3, 1fr)
    > .v-calendar-month__day:nth-child(3n)
      border-right: none
  &.days__4
    grid-template-columns: repeat(4, 1fr)
    > .v-calendar-month__day:nth-child(4n)
      border-right: none
  &.days__5
    grid-template-columns: repeat(5, 1fr)
    > .v-calendar-month__day:nth-child(5n)
      border-right: none
  &.days__6
    grid-template-columns: repeat(6, 1fr)
    > .v-calendar-month__day:nth-child(6n)
      border-right: none
    &.v-calendar-month__weeknumbers
      grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
  &.days__7
    grid-template-columns: repeat(7, 1fr)
    > .v-calendar-month__day:nth-child(7n)
      border-right: none

  &.days-with-weeknumbers__0
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
    > .v-calendar-month__day
      border-right: none
  &.days-with-weeknumbers__1
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis 1fr
    > .v-calendar-month__day
      border-right: none
  &.days-with-weeknumbers__2
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(2, 1fr)
    > .v-calendar-month__day:nth-child(3n)
      border-right: none
  &.days-with-weeknumbers__3
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(3, 1fr)
    > .v-calendar-month__day:nth-child(4n)
      border-right: none
  &.days-with-weeknumbers__4
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(4, 1fr)
    > .v-calendar-month__day:nth-child(5n)
      border-right: none
  &.days-with-weeknumbers__5
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(5, 1fr)
    > .v-calendar-month__day:nth-child(6n)
      border-right: none
  &.days-with-weeknumbers__6
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(6, 1fr)
    > .v-calendar-month__day:nth-child(7n)
      border-right: none
  &.days-with-weeknumbers__7
    grid-template-columns: $calendar-weekly-weeknumber-flex-basis repeat(7, 1fr)
    > .v-calendar-month__day:nth-child(7n)
      border-right: $calendar-line-width solid $calendar-line-width
    > .v-calendar-month__day:nth-child(8n)
      border-right: none
    > .v-calendar-month__day:nth-child(8n)
      border-right: none