@media (prefers-color-scheme: light) {
  .simple-calendar {
    --today-bg: var(--bulma-info-20);
    --prev-next-bg: #f6f6f6;
  }
}
[data-theme=light] {
  .simple-calendar {
    --today-bg: var(--bulma-info-20-invert);
    --prev-next-bg: #f6f6f6;
  }
}

.simple-calendar {
  --today-bg: var(--bulma-info-10);
  --prev-next-bg: #060606;

  table, th, td {
    border: 0;
  }
  table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: calc(var(--bulma-column-gap)/4);
    th {
      text-align: left !important;
    }
    th, .day-link {
      padding: calc(var(--bulma-column-gap)/2);
    }
  }

  .day {
    background-color: var(--bulma-background);
    padding: 0;
    border: 2px solid var(--bulma-background);
  }
  .today {
    background-color: var(--today-bg);
  }
  .start-date {
    --bulma-primary-l: var(--bulma-primary-15-l);
    border-color: var(--bulma-primary);
  }
  .prev-month, .next-month {
    background-color: var(--prev-next-bg);
  }

  .day-link-wrapper {
    height: 100%;
  }
  .day-link {
    display: block;
    width: 100%;
    height: 100%;
    transition: background-color .15s;
    &:hover {
      background-color: var(--today-bg);
    }
  }
  .day, .day-link {
    border-radius: 3px;
  }
}

nav.calendar {
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.calendar-title {
  font-weight: bold;
  color: var(--bulma-primary);
}
.calendar-event {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bulma-primary);
  color: #fff;
  margin: 0.1rem;
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
  white-space: nowrap;
}