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

@component-namespace el {
  @b month-table {
    font-size: 12px;
    margin: -1px;
    border-collapse: collapse;

    td {
      text-align: center;
      padding: 20px 3px;
      cursor: pointer;

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

      .cell {
        width: 48px;
        height: 32px;
        display: block;
        line-height: 32px;
        color: var(--datepicker-color);

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

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