CalendarMonth.scss

@import "variables";

.CalendarMonth {
  text-align: center;
  padding: 0 13px;
  vertical-align: top;

  &:first-of-type {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
}

.CalendarMonth--horizontal {
  display: inline-block;
  min-height: 100%;
}

.CalendarMonth--vertical {
  display: block;
}

.CalendarMonth__caption {
  color: $color-dark-gray;
  margin-top: 7px;
  font-size: 18px;
  padding: 15px 0 35px;

  // necessary to not hide borders in FF
  margin-bottom: 2px;
}

// This order is important.
.CalendarMonth__day {
  border: 1px solid lighten($border-light, 3);
  padding: 0;
  box-sizing: border-box;
  color: $color-dark;
  cursor: pointer;
  width: 39px;
  height: 38px;

  &:active {
    background: darken($color-white, 5%);
  }
}

.CalendarMonth__day--outside {
  border: 0;
  cursor: default;

  &:active {
    background: $color-white;
  }
}

.CalendarMonth__day--hovered {
  background: lighten($border-light, 3);
  border: 1px double darken($border-light, 3);
  color: inherit;
}

.CalendarMonth__day--blocked-minimum-nights {
  color: $color-light-gray;
  background: $color-white;
  border: 1px solid lighten($border-light, 3);
  cursor: default;

  &:active {
    background: $color-white;
  }
}

.CalendarMonth__day--selected-span {
  background: $babu-shade-4;
  border: 1px double $babu-shade-2;
  color: $color-white;

  &.CalendarMonth__day--hovered,
  &:active {
    background: $babu-shade-2;
    border: 1px double $color-babu;
  }

  &.CalendarMonth__day--last-in-range {
    border-right: $color-babu;
  }
}

.DateRangePicker__picker--valid-date-hovered {
  .CalendarMonth__day--hovered-span,
  .CalendarMonth__day--after-hovered-start {
    background: $babu-shade-7;
    border: 1px double $babu-shade-5;
    color: $color-kazan;
  }
}

.DateRangePicker__picker--valid-date-hovered .CalendarMonth__day--selected-start,
.DateRangePicker__picker--valid-date-hovered .CalendarMonth__day--selected-end,
.CalendarMonth__day--selected-start,
.CalendarMonth__day--selected-end,
.CalendarMonth__day--selected {
  background: $color-babu;
  border: 1px double $color-babu;
  color: $color-white;

  &:active {
    background: $color-babu;
  }
}

.CalendarMonth__day--blocked-calendar {
  background: $color-light-gray;
  color: $color-gray;
  cursor: default;

  &:active {
    background: $color-light-gray;
  }
}

.CalendarMonth__day--blocked-past-date {
  color: $color-light-gray;
  background: $color-white;
  border: 1px solid lighten($border-light, 3);
  cursor: default;

  &:active {
    background: $color-white;
  }
}