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

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

    td {
      text-align: center;
      padding: var(--month-year-table-padding);
      cursor: pointer;

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

      .cell {
        width: 100%;
        height: var(--datetable-td-size);
        display: block;
        line-height: var(--datetable-td-size);
        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);
      }
    }
  }
}