@use '../../styles/tools'
@use '../../styles/settings'
@use './variables' as *

@include tools.layer('components')
  .v-calendar-category
    .v-calendar-category__column,
    .v-calendar-category__column-header
      border-right: $calendar-grid-color $calendar-line-width solid

    .v-calendar-daily__head
      background: $calendar-background
      color: $calendar-on-background

    .v-calendar-daily__intervals-head
      background: $calendar-background
      color: $calendar-on-background

    .v-calendar-daily__intervals-body
      background: $calendar-background
      color: $calendar-on-background

  .v-calendar-category
    overflow: auto
    position: relative

    .v-calendar-category__category
      text-align: center

    .v-calendar-daily__day-container
      width: min-content
      .v-calendar-category__columns
        position: absolute
        height: 100%
        width: 100%
        top: 0

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

    .v-calendar-daily__head
      flex-direction: row
      width: min-content
      min-width: 100%
      position: sticky
      top: 0
      z-index: 2

    .v-calendar-daily_head-day
      width: auto
      position: unset

    .v-calendar-daily__intervals-head
      position: sticky
      left: 0
      top: 0
      z-index: 2

    .v-calendar-daily_head-weekday
      position: sticky
      left: 50%
      width: $calendar-daily-head-weekday-size

    .v-calendar-daily_head-day-label
      width: $calendar-daily-head-day-label-size
      position: sticky
      left: 50%

    .v-calendar-daily__day
      min-width: $calendar-category-column-min-width

    .v-calendar-daily__intervals-body
      position: sticky
      left: 0
      z-index: 1

    .v-calendar-daily__interval
      &:last-of-type::after
        display: none

    .v-calendar-daily__body
      overflow: visible
      .v-calendar-daily__scroll-area
        overflow-y: visible
        flex: none

    .v-calendar-daily__pane
      overflow-y: visible

    .v-calendar-category__columns
      display: flex
      width: min-content
      min-width: 100%

      .v-calendar-category__column,
      .v-calendar-category__column-header
        flex: 1 1 auto
        width: 0
        position: relative

      .v-calendar-category__column-header
        min-width: $calendar-category-column-min-width