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

@include tools.layer('components')
  .v-calendar-events
    .v-event-more
      background-color: $calendar-background
      color: $calendar-on-background

      &.v-outside
        background-color: $calendar-outside-background
        color: $calendar-on-outside-background

  .v-calendar
    .v-event
      position: relative
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      font-size: $calendar-event-font-size
      cursor: pointer
      line-height: $calendar-event-line-height
      margin-right: -$calendar-line-width
      z-index: 1
      border-radius: $calendar-event-border-radius

    .v-event-more
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      font-size: $calendar-event-font-size
      cursor: pointer
      font-weight: bold
      z-index: 1
      position: relative

    .v-event-timed-container
      position: absolute
      top: 0
      bottom: 0
      left: 0
      right: 0
      margin-right: $calendar-event-right-empty
      pointer-events: none

    .v-event-timed
      position: absolute
      white-space: nowrap
      text-overflow: ellipsis
      font-size: $calendar-event-font-size
      cursor: pointer
      border: $calendar-event-border-width solid $calendar-background
      border-radius: $calendar-event-border-radius
      pointer-events: all

    .v-event-summary
      display: inline-block
      overflow: hidden
      text-overflow: ellipsis
      width: 100%
      white-space: nowrap

    &.v-calendar-events
      .v-calendar-weekly__head-weekday
        margin-right: -$calendar-line-width
      .v-calendar-weekly__day
        overflow: visible
        margin-right: -$calendar-line-width