@import "../common/var.css";

@component-namespace el {
  @b date-table {
    font-size: 12px;
    min-width: 224px;
    user-select: none;

    @when week-mode {
      .el-date-table__row {
        &:hover {
          background-color: var(--datepicker-cell-hover-color);
        }

        &.current {
          background-color: var(--datepicker-inrange-color);
        }
      }
    }

    td {
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;

      &.next-month,
      &.prev-month {
        color: var(--datepicker-off-color);
      }

      &.today {
        color: var(--datepicker-text-hover-color);
        position: relative;
        &:before {
          content: " ";
          position: absolute;
          top: 0px;
          right: 0px;
          width: 0;
          height: 0;
          border-top: 0.5em solid var(--datepicker-active-color);
          border-left: .5em solid transparent;
        }
      }

      &.available:hover {
        background-color: var(--datepicker-cell-hover-color);
      }

      &.in-range {
        background-color: var(--datepicker-inrange-color);
        &:hover {
          background-color: var(--datepicker-inrange-hover-color);
        }
      }

      &.current:not(.disabled),
      &.start-date,
      &.end-date {
        background-color: var(--datepicker-active-color) !important;
        color: var(--color-white);
      }

      &.disabled {
        background-color: #f4f4f4;
        opacity: 1;
        cursor: not-allowed;
        color: #ccc;
      }

      &.week {
        font-size: 80%;
        color: var(--datepicker-header-color);
      }
    }

    th {
      padding: 5px;
      color: var(--datepicker-header-color);
      font-weight: 400;
    }
  }
}