@import './_variables.scss'

// Theme
.theme--light.v-calendar-daily

  background-color: $calendar-background-color
  border-left: $calendar-line-color $calendar-line-width solid
  border-top: $calendar-line-color $calendar-line-width solid

  .v-calendar-daily__intervals-head
    border-right: $calendar-line-color $calendar-line-width solid

    &::after
      background: $calendar-line-color
      background: linear-gradient(90deg, transparent, $calendar-line-color)

  .v-calendar-daily_head-day
    border-right: $calendar-line-color $calendar-line-width solid
    border-bottom: $calendar-line-color $calendar-line-width solid
    color: $calendar-text-color

    &.v-past
      .v-calendar-daily_head-weekday,
      .v-calendar-daily_head-day-label
        color: $calendar-past-color

  .v-calendar-daily__intervals-body
    border-right: $calendar-line-color $calendar-line-width solid

    .v-calendar-daily__interval-text
      color: $calendar-interval-color

  .v-calendar-daily__day
    border-right: $calendar-line-color $calendar-line-width solid
    border-bottom: $calendar-line-color $calendar-line-width solid

  .v-calendar-daily__day-interval
    border-top: $calendar-line-color $calendar-line-width solid

    &:first-child
      border-top: none !important

  .v-calendar-daily__interval::after
    border-top: $calendar-line-color $calendar-line-width solid

.v-calendar-daily
  display: flex
  flex-direction: column
  overflow: hidden

.v-calendar-daily__head
  flex: none
  display: flex

.v-calendar-daily__intervals-head
  flex: none
  position: relative

  &::after
    position: absolute
    bottom: 0px
    height: $calendar-line-width
    left: 0
    right: 0
    content: ''

.v-calendar-daily_head-day
  flex: 1 1 auto
  width: 0
  position: relative

.v-calendar-daily_head-weekday
  user-select: none
  padding: $calendar-daily-weekday-padding
  text-align: center
  text-transform: uppercase

.v-calendar-daily_head-day-label
  user-select: none
  padding: $calendar-daily-day-padding
  cursor: pointer
  text-align: center

.v-calendar-daily__body
  flex: 1 1 60%
  overflow: visible
  display: flex
  position: relative
  flex-direction: column

.v-calendar-daily__scroll-area
  overflow-y: visible
  flex: 1 1 auto
  display: flex
  align-items: flex-start

.v-calendar-daily__pane
  width: 100%
  overflow-y: visible
  flex: none
  display: flex
  align-items: flex-start

.v-calendar-daily__day-container
  display: flex
  flex: 1
  width: 100%
  height: 100%

.v-calendar-daily__intervals-body
  display: flex
  flex-direction: column
  height: 100%
  flex: none
  user-select: none

.v-calendar-daily__interval
  display: flex
  flex-basis: 0
  text-align: $calendar-daily-interval-gutter-align
  padding-right: $calendar-daily-interval-gutter-line-width
  border-bottom: none

  &::after
    width: $calendar-daily-interval-gutter-line-width
    position: absolute
    height: $calendar-line-width
    display: block
    content: ''
    right: 0
    bottom: -$calendar-line-width

.v-calendar-daily__interval-text
  display: block
  position: relative
  top: $calendar-daily-interval-gutter-top
  padding-right: $calendar-daily-interval-gutter-width

.v-calendar-daily__day
  flex: 1
  width: 0
  position: relative
