.monthTitle {
}

.dateGrid {
  display: grid;

  grid-template-columns: repeat(7, 1fr);
}

.dateCell {
  display: flex;
  flex-direction: column;

  border-width: 1px 0 0 1px;
  border-color: lightgray;
  border-style: solid;

  color: var(--disabled-text-color);
  transition: color 0.1s ease-out;
}

.active .dateCell {
  color: var(--normal-text-color);
}

.dateNumber {
  cursor: default;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  padding: 4px;

  span {
    padding: 8px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;

    &.today {
      background-color: red;
      color: white;
    }
  }
}