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

@include tools.layer('components')
  .v-date-picker-month
    display: flex
    justify-content: center
    padding: $date-picker-month-padding

    --v-date-picker-month-day-diff: 4px

  .v-date-picker-month__weeks
    display: flex
    flex-direction: column
    column-gap: $date-picker-month-column-gap
    font-size: $date-picker-month-font-size

  .v-date-picker-month__weekday
    font-size: $date-picker-month-font-size

  .v-date-picker-month__days
    display: grid
    grid-template-columns: repeat(var(--v-date-picker-days-in-week), min-content)
    column-gap: $date-picker-month-column-gap
    justify-content: space-around
    width: 100%

  .v-date-picker-month__day
    align-items: center
    display: flex
    justify-content: center
    position: relative
    height: $date-picker-month-day-size
    width: $date-picker-month-day-size

    &--selected
      .v-btn
        background-color: rgb(var(--v-theme-surface-variant))
        color: rgb(var(--v-theme-on-surface-variant))

    .v-btn.v-date-picker-month__day-btn
      --v-btn-height: #{$date-picker-month-btn-height}
      --v-btn-size: #{$date-picker-month-btn-size}

    &--week
      font-size: var(--v-btn-size)

  .v-date-picker-month__day--adjacent
    opacity: 0.5

  .v-date-picker-month__day--hide-adjacent
    opacity: 0
  .v-date-picker-month__events
    height: $date-picker-event-size
    left: 0
    text-indent: 0
    position: absolute
    text-align: center
    white-space: pre
    width: 100%

    > div
      height: $date-picker-event-size
      margin: $date-picker-event-margin
      width: $date-picker-event-size
      margin-bottom: -1px

    .v-badge--dot .v-badge__badge
      border-radius: $date-picker-event-border-radius
      height: $date-picker-event-size
      width: $date-picker-event-size

  .v-date-picker-month__day .v-date-picker-month__events
    bottom: $date-picker-event-date-bottom