@import '../style/theme/color';
@import 'datepicker.component.scss';

.devui-month-view {
  box-shadow: none;

  & .devui-table > tbody > tr > td.devui-in-month-day {
    &.devui-in-range {
      &:not(.active):not(.disabled) {
        background-color: $devui-list-item-hover-bg;
        color: $devui-text;
        border-radius: 0;

        &:hover {
          background-color: $devui-range-item-hover-bg;
        }
      }

      &.disabled:not(.active) {
        background-color: $devui-dividing-line;
        opacity: 0.8;
        color: $devui-text;
      }
    }

    &.active.disabled {
      background-color: $devui-dividing-line;

      .devui-calendar-date {
        opacity: 0.8;
      }
    }
  }

  & .devui-in-month-day.devui-in-range.disabled:not(.active) .devui-calendar-date {
    color: $devui-text;
    cursor: not-allowed;
  }

  & .devui-day.devui-out-of-month.active {
    &:hover .devui-calendar-date {
      background-color: transparent;
      color: $devui-icon-text;
    }

    &.disabled {
      background-color: transparent;
    }
  }
}

tr.devui-calender-header {
  height: 38px;
  user-select: none;
}

.devui-month-view .devui-btn-link.devui-btn-right {
  transform: scale(1, 1);
  display: inline-block;
  line-height: 1;
}

.devui-monthOption,
.devui-yearOption {
  white-space: normal;
}
