@layer env.components {
  .env-calendar-heatmap {
    --env-calendar-heatmap-tone: var(--env-color-fg-primary);
    --env-calendar-heatmap-cell: 0.75rem;
    --env-calendar-heatmap-gap: 0.1875rem;
    inline-size: fit-content;
    max-inline-size: 100%;
    color: var(--env-color-fg-muted);
    --env-calendar-heatmap-font-size: 0.75rem;
    font: var(--env-font-weight-regular) var(--env-calendar-heatmap-font-size) / 1
      var(--env-font-family);
  }
  .env-calendar-heatmap[data-tone='accent'] {
    --env-calendar-heatmap-tone: var(--env-color-fg-accent);
  }
  .env-calendar-heatmap[data-tone='neutral'] {
    --env-calendar-heatmap-tone: var(--env-color-fg-muted);
  }
  .env-calendar-heatmap[data-tone='success'] {
    --env-calendar-heatmap-tone: var(--env-color-fg-success);
  }
  .env-calendar-heatmap[data-tone='warning'] {
    --env-calendar-heatmap-tone: var(--env-color-fg-warning);
  }
  .env-calendar-heatmap[data-tone='danger'] {
    --env-calendar-heatmap-tone: var(--env-color-fg-danger);
  }
  .env-calendar-heatmap[data-tone='done'] {
    --env-calendar-heatmap-tone: var(--env-color-fg-done);
  }
  .env-calendar-heatmap-scroll {
    display: flex;
    flex-direction: row-reverse;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .env-calendar-heatmap-grid {
    flex: none;
    margin-inline-end: auto;
    border-collapse: separate;
    border-spacing: var(--env-calendar-heatmap-gap);
    font: inherit;
    outline: none;
  }
  .env-calendar-heatmap-grid :is(th, td) {
    padding: 0;
  }
  .env-calendar-heatmap-month,
  .env-calendar-heatmap-weekday {
    color: var(--env-color-fg-muted);
    font: inherit;
    font-weight: var(--env-font-weight-regular);
    text-align: start;
    white-space: nowrap;
  }
  .env-calendar-heatmap-month > span {
    display: block;
    inline-size: 0;
    padding-block-end: var(--env-space-1);
  }
  .env-calendar-heatmap-weekday {
    padding-inline-end: var(--env-space-1);
    line-height: var(--env-calendar-heatmap-cell);
  }
  .env-calendar-heatmap-day,
  .env-calendar-heatmap-pad {
    inline-size: var(--env-calendar-heatmap-cell);
    min-inline-size: var(--env-calendar-heatmap-cell);
    block-size: var(--env-calendar-heatmap-cell);
  }
  .env-calendar-heatmap-day,
  .env-calendar-heatmap-swatch {
    border-radius: calc(var(--env-space-1) / 2);
    background: var(--env-color-bg-neutral-muted);
  }
  .env-calendar-heatmap-day:not([data-level='0']),
  .env-calendar-heatmap-swatch:not([data-level='0']) {
    background: color-mix(
      in srgb,
      var(--env-calendar-heatmap-tone) var(--env-calendar-heatmap-mix),
      var(--env-color-bg-page)
    );
  }
  .env-calendar-heatmap-day:focus {
    outline: none;
  }
  @media (hover: hover) {
    .env-calendar-heatmap-day:hover {
      outline: 1px solid var(--env-color-fg-muted);
      outline-offset: 1px;
    }
  }
  .env-calendar-heatmap-day:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 1px;
  }
  .env-calendar-heatmap-legend {
    gap: var(--env-calendar-heatmap-gap);
    justify-self: end;
  }
  .env-calendar-heatmap-legend > :first-child {
    margin-inline-end: var(--env-space-1);
  }
  .env-calendar-heatmap-legend > :last-child {
    margin-inline-start: var(--env-space-1);
  }
  .env-calendar-heatmap-swatch {
    inline-size: var(--env-calendar-heatmap-cell);
    block-size: var(--env-calendar-heatmap-cell);
  }
  @media (pointer: coarse) {
    .env-calendar-heatmap {
      --env-calendar-heatmap-cell: 1.25rem;
      --env-calendar-heatmap-gap: 0.25rem;
    }
  }
  .env-calendar-heatmap-tooltip-positioner:is(:has(> [data-focus-opened]), [data-closed]) {
    pointer-events: none;
  }
  @media (forced-colors: active) {
    .env-calendar-heatmap-day {
      forced-color-adjust: none;
    }
  }
  [data-env-skeleton] :is(.env-calendar-heatmap-day, .env-calendar-heatmap-swatch) {
    forced-color-adjust: none;
    --env-skeleton-shape: 1;
    background: var(--env-skeleton-paint);
  }
}