.simple-calendar {
  --today-bg: #FFFFC0;
  --today-fg: black;
  --border-highlight: var(--orange, orange);
  --other-month-bg: #ddd;
  --other-month-fg: #666;
  --bg-cell: #e2e8e3;
  --bg-cell-has-events: var(--bg-dark);

  table {
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
    background-color: transparent;
    border-collapse: separate;
    border-spacing: 1px 5px;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    min-width: 490px;
    border: 0;
  }

  tr {
    border-collapse: collapse;
  }

  th {
    box-sizing: border-box;
    text-align: left;
    width: 70px;
    border: 0;
    padding: 8px !important;
  }

  td {
    width: 70px;
    vertical-align: top;
    padding: 2px;
    border: 0;
    border-radius: 3px;
    background: var(--bg-cell);
  }

  .day {
    height: 80px;
  }

  .wday-0 {}
  .wday-1 {}
  .wday-2 {}
  .wday-3 {}
  .wday-4 {}
  .wday-5 {}
  .wday-6 {}

  .today {
    padding: 3px;
    border: 2px solid var(--border-highlight);
  }

  .past {}
  .future {}

  .start-date {}

  .prev-month {
    background: var(--other-month-bg, #DDD);
    color: var(--other-month-fg, #444);
  }
  .next-month {
    background: var(--other-month-bg, #DDD);
    color: var(--other-month-fg, #444);
  }
  .current-month {}

  .has-events {
    background: var(--bg-cell-has-events);
    border-color: var(--border-highlight);
    border-width: 2px;
  }

  .event-summary {
    max-width: 64px;
    overflow-x: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-events {
    .app-event {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      align-items: baseline;

      .app-event--time {
        font-size: smaller;
        align-self: end;
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  .simple-calendar {
    --bg-cell: #343434;
  }
}

@media (min-width: 520px) {
  .simple-calendar {
    .event-summary {
      max-width: unset;
    }
  }
}