/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';
@import '../date-picker/vars.less';
@import '../date-table/vars.less';

@month-table-prefix-cls: ~'@{css-prefix}month-table';

.@{month-table-prefix-cls} {
  .component-css-vars-month-table();
  .component-css-vars-date-picker();
  .component-css-vars-date-table();

  .month-table();
}

.month-table() {
  font-size: var(--ti-date-picker-font-size);
  margin: -1px;
  border-collapse: collapse;

  tr, td {
    text-align: center;
    padding: 16px 0;
    cursor: pointer;

    &.current {
      padding-left: 3px;
      padding-right: 3px;
    }

    div {
      height: 32px;
      box-sizing: border-box;
    }

    &.today {
      .cell {
        color: var(--ti-month-table-td-text-bg-color);
        font-weight: 700;
      }

      &.end-date,
      &.start-date {
        .cell {
          color: var(--ti-month-table-td-date-text-color);
        }
      }
    }

    &.disabled {
      .cell {
        background-color: var(--ti-date-picker-disabled-bg-color);
        cursor: not-allowed;
        color: var(--ti-date-picker-disabled-text-color);

        &:hover {
          color: var(--ti-date-picker-disabled-text-color);
        }
      }
    }

    .cell {
      width: 100%;
      height: 32px;
      line-height: 32px;
      display: block;
      color: var(--ti-date-picker-text-color);

      &:hover {
        color: var(--ti-date-picker-text-color);
        background: var(--ti-date-picker-hover-bg-color);
      }
    }

    &.in-range {
      div,
      div:hover {
        background-color: var(--ti-month-table-td-range-bg-color);
      }
    }

    &.end-date,
    &.start-date {
      div {
        color: var(--ti-month-table-td-date-text-color);
      }

      .cell {
        color: var(--ti-month-table-td-date-text-color);
        background-color: var(--ti-month-table-td-text-bg-color);
      }
    }

    &:not(.in-range) {
      .cell {
        width: auto;
        border-radius: 2px;
      }
    }

    &.current:not(.disabled) .cell {
      &,
      &:hover {
        color: var(--ti-date-table-td-normal-text-color);
        background: var(--ti-month-table-td-text-bg-color);
      }
    }
  }
}
