@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: $react-dates-color-gray-dark;
  margin-top: 7px;
  font-size: 18px;
  padding: 15px 0 35px;
  text-align: center;
  // necessary to not hide borders in FF
  margin-bottom: 2px;
}

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

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

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

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

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

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

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

.CalendarMonth__day--selected-span {
  background: $react-dates-color-primary-shade-2;
  border: 1px double $react-dates-color-primary-shade-1;
  color: $react-dates-color-white;

  &.CalendarMonth__day--hovered,
  &:active {
    background: $react-dates-color-primary-shade-1;
    border: 1px double $react-dates-color-primary;
  }

  &.CalendarMonth__day--last-in-range {
    border-right: $react-dates-color-primary;
  }
}

.CalendarMonth__day--hovered-span,
.CalendarMonth__day--after-hovered-start {
  background: $react-dates-color-primary-shade-4;
  border: 1px double $react-dates-color-primary-shade-3;
  color: $react-dates-color-secondary;
}

.CalendarMonth__day--selected-start,
.CalendarMonth__day--selected-end,
.CalendarMonth__day--selected {
  background: $react-dates-color-primary;
  border: 1px double $react-dates-color-primary;
  color: $react-dates-color-white;

  &:active {
    background: $react-dates-color-primary;
  }
}

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

  &:active {
    background: $react-dates-color-gray-lighter;
  }
}

.CalendarMonth__day--blocked-out-of-range {
  color: $react-dates-color-gray-lighter;
  background: $react-dates-color-white;
  border: 1px solid lighten($react-dates-color-border-light, 3);
  cursor: default;

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