/*
Copied from https://github.com/excid3/simple_calendar/blob/24fc28e97abbb45989cf51fedba04d6a90fd9939/app/assets/stylesheets/simple_calendar.css
and then modified a lot
*/

/* stylelint-disable block-no-empty */
.simple-calendar {
  nav {
    align-items: center;
    background: var(--slate-200);
    border-radius: var(--rounded-md);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--size-6);
    padding: var(--size-4);

    @media (width >= 48em) {
      align-items: baseline;
      flex-direction: row;
      justify-content: space-between;
    }

    a {
      text-decoration: none;
    }

    @media (width >= 48rem) {
      grid-column: 1 / span 5;
    }

    @media (prefers-color-scheme: dark) {
      background: var(--zinc-600);
    }
  }

  .calendar--rocker {
    background: var(--color-bg);

    @media (prefers-color-scheme: dark) {
      background: var(--color-bg);

      a {
        color: var(--color-text);
      }
    }
  }

  .calendar__hint {
    grid-column: 1 / span 1;

    @media (width >= 48rem) {
      grid-column: 1 / span 5;
    }
  }

  .calendar__week {
    background: var(--color-unobtrusive-background);
    grid-column: 1 / span 1;

    @media (width >= 48rem) {
      grid-column: 1 / span 5;
    }
  }

  .calendar__uncovered {
    background: var(--color-primary);
    border-radius: var(--rounded-md);
    color: var(--color-text-reversed);
    padding: var(--size-2);
  }

  .calendar {
    display: grid;
    grid-template-columns: 1fr;
    margin-block-start: var(--size-2);

    @media (width >= 48rem) {
      /*
       * 1 column for each weekday (Mon-Fri) = 5 columns
       */
      grid-template-columns: repeat(5, 1fr);
      margin-block-start: var(--size-4);
    }
  }

  .day {
    border: 1px solid var(--gray-300);
    max-height: var(--size-25);
  }

  .calendar__date {
    color: var(--color-text-subtle);

    @media (prefers-color-scheme: dark) {
      color: var(--color-text);
    }
  }

  .calendar__vacation {
    background: var(--yellow-300);
    border-radius: var(--rounded-sm);
    color: var(--color-text);
    padding: var(--size-1);

    @media (prefers-color-scheme: dark) {
      background: var(--yellow-200);
      color: var(--color-text-reversed);
    }
  }

  .calendar__covering {
    background: var(--teal-200);
    border-radius: var(--rounded-sm);
    color: var(--color-text);
    padding: var(--size-1);

    @media (prefers-color-scheme: dark) {
      background: var(--yellow-600);
      color: var(--color-text-reversed);
    }
  }

  .today .calendar__date {
    color: var(--color-text);

    span {
      background: var(--sky-200);
      border-radius: var(--rounded-2xl);
      padding: var(--size-1) var(--size-2);

      @media (prefers-color-scheme: dark) {
        color: var(--color-text-reversed);
      }
    }
  }

  .prev-month,
  .next-month {
    background: var(--zinc-200);

    .calendar__date {
      color: var(--color-text);
    }

    @media (prefers-color-scheme: dark) {
      background: var(--zinc-800);
      color: var(--color-text);
    }
  }

  .day ul {
    width: 100%;
  }

  .past {
  }

  .future {
  }

  .start-date {
  }

  .wday-0 {
  }

  .wday-1 {
  }

  .wday-2 {
  }

  .wday-3 {
  }

  .wday-4 {
  }

  .wday-5 {
  }

  .wday-6 {
  }

  .current-month {
  }

  .has-events {
  }
}
/* stylelint-enable */