@layer modules {
  .calendar {
    border: 1px solid var(--color-ink-light);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .calendar__day-name {
    background-color: var(--color-void);
    color: var(--color-paper);
    font-size: var(--text-x-small);
    font-weight: 600;
    padding: var(--block-space-half);
    text-align: center;
    text-transform: uppercase;
  }

  .calendar__day-name-mobile {
    display: none;
    text-transform: none;
  }

  .calendar__cell {
    background-color: var(--color-surface);
    border-block-start: 1px solid var(--color-ink-light);
    border-inline-start: 1px solid var(--color-ink-light);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-block-size: 6rem;
    overflow: hidden;
    padding: 2px;

    &:nth-child(7n + 1) {
      border-inline-start: 0;
    }

    @media (max-width: 639px) {
      min-block-size: 3.5rem;
    }
  }

  .calendar__desktop-day {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
  }

  .calendar__mobile-day,
  .calendar__mobile-details {
    display: none;
  }

  .calendar__cell--outside {
    background-color: var(--color-canvas);

    .calendar__date {
      opacity: 0.4;
    }
  }

  .calendar__cell--today {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }

  .calendar__date {
    color: var(--color-ink-medium);
    font-size: var(--text-x-small);
    padding-inline: 2px;
  }

  .color__mine {
    background-color: oklch(var(--lch-green-lighter));
    border-color: var(--color-positive);
  }

  .calendar__pill {
    --pill-bg: oklch(var(--lch-ink-lighter));

    background-color: var(--pill-bg);
    display: block;
    font-size: var(--text-x-small);
    overflow: hidden;
    padding: 1px 8px;
    text-decoration: none;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;

    &:hover {
      background-color: oklch(var(--lch-ink-light));
    }
  }

  .calendar__pill.mine {
    --pill-bg: oklch(var(--lch-green-lighter));
  }

  .engagement-hovercard {
    min-inline-size: 0;
  }

  .engagement-hovercard__card {
    --panel-chamfer: var(--chamfer-small);
    --panel-size: 16rem;

    box-shadow: var(--shadow);
    inset: auto;
    margin: 0;
    position: fixed;
    z-index: var(--z-tooltip);
  }

  @media (max-width: 639px) {
    .calendar {
      --calendar-accent: var(--color-primary);

      border: 0;
    }

    .calendar--mine {
      --calendar-accent: oklch(var(--lch-green-light));
    }

    .calendar__day-name {
      font-size: var(--text-small);
      padding-block: var(--block-space-half);
    }

    .calendar__day-name-desktop,
    .calendar__desktop-day,
    .calendar__upcoming {
      display: none;
    }

    .calendar__day-name-mobile {
      display: inline;
    }

    .calendar__cell {
      aspect-ratio: 1;
      min-block-size: 0;
      padding: 0;
    }

    .calendar__cell--today {
      box-shadow: none;
    }

    .calendar__cell--selected {
      box-shadow: inset 0 0 0 2px var(--calendar-accent);
    }

    .calendar__mobile-day {
      align-items: center;
      appearance: none;
      background: transparent;
      block-size: 100%;
      border: 0;
      color: var(--color-ink);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      inline-size: 100%;
      justify-content: center;
      padding: 0;
    }

    .calendar__mobile-date {
      display: grid;
      font-size: var(--text-medium);
      font-weight: 500;
      place-items: center;
    }

    .calendar__mobile-date--today {
      aspect-ratio: 1;
      background-color: var(--calendar-accent);
      color: var(--color-ink);
      inline-size: 1.75rem;
      font-weight: 700;
    }

    .calendar__dots {
      block-size: 0.3rem;
      display: flex;
      gap: 0.2rem;
    }

    .calendar__dot {
      aspect-ratio: 1;
      background-color: var(--color-ink-medium);
      border-radius: 50%;
      block-size: 0.3rem;
    }

    .calendar__mobile-details {
      border-block-start: 1px solid var(--color-ink-light);
      display: block;
      padding-block-start: var(--block-space-double);
    }

    .calendar__mobile-row + .calendar__mobile-row {
      border-block-start: 1px solid var(--color-ink-light);
    }
  }

  .calendar-subscription__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
  }

  .calendar-subscription__tab {
    --btn-background: transparent;
    --btn-border-color: transparent;

    &[aria-current] {
      --btn-background: var(--color-surface);
    }
  }

  .calendar-subscription__url {
    display: grid;
    gap: var(--inline-space-half);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .calendar-subscription__instructions {
    display: grid;
    gap: var(--block-space-half);
    padding-inline-start: var(--inline-space-double);
  }
}