@import '../bootstrap'
@import '../theme'

v-calendar-weekly($material)
  background-color: $material.calendar.background-color
  .v-calendar-weekly__head-weekday
    border-right: $material.calendar.line-color 1px solid;
    color: $material.calendar.text-color;
    &.v-past
      color: $material.calendar.past-color
    &.v-outside
      background-color: $material.calendar.outside-background-color;
  .v-calendar-weekly__day
    border-right: $material.calendar.line-color 1px solid;
    border-bottom: $material.calendar.line-color 1px solid;
    color: $material.calendar.text-color;
    &.v-outside
      background-color: $material.calendar.outside-background-color;


theme(v-calendar-weekly, "v-calendar-weekly")

.v-calendar-weekly
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

.v-calendar-weekly__head
  display: flex;
  user-select: none;

.v-calendar-weekly__head-weekday
  flex: 1 0 20px;
  user-select: none;
  padding: $calendar-weekly-weekday-padding;
  font-size: $calendar-weekly-weekday-font-size;

.v-calendar-weekly__week
  display: flex;
  flex: 1;

.v-calendar-weekly__day
  flex: 1;
  width: 0;
  overflow: hidden;
  user-select: none;
  position: relative;
  padding: $calendar-weekly-day-padding;

  &.v-present
    .v-calendar-weekly__day-label
      border: 1px solid currentColor;
    .v-calendar-weekly__day-month
      color: currentColor

.v-calendar-weekly__day-label
  position: absolute;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  box-shadow: none;
  text-align: center;
  left: 0;
  top: 0;
  border-radius: $calendar-weekly-day-label-radius;
  width: $calendar-weekly-day-label-size;
  height: $calendar-weekly-day-label-size;
  line-height: $calendar-weekly-day-label-size;

  &:hover
    text-decoration: underline;

.v-calendar-weekly__day-month
  position: absolute;
  text-decoration: none;
  user-select: none;
  box-shadow: none;
  top: 0;
  left: $calendar-weekly-day-month-left;
  height: $calendar-weekly-day-label-size;
  line-height: $calendar-weekly-day-label-size;