@layer components {
  .calendar__week,
  .calendar__agenda {
    list-style: none;
    margin-block: var(--block-space-half) 0;
    padding: 0;
    background-color: var(--color-canvas);
    border: var(--border);
    border-radius: 1em;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .calendar__day,
  .calendar__agenda-day {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    min-inline-size: 0;
    padding: var(--block-space-half) var(--inline-space);

    &[aria-current] {
      background-color: var(--color-selected-light);
    }
  }

  .calendar__agenda-day + .calendar__agenda-day {
    border-block-start: var(--border);
  }

  .calendar__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--inline-space);
  }

  .calendar__agenda-day .calendar__head {
    align-self: start;
    justify-content: flex-start;
    column-gap: var(--inline-space-half);
    font-variant-numeric: tabular-nums;
  }

  .calendar__month {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);

    &::first-letter {
      text-transform: uppercase;
    }
  }

  .calendar__date {
    color: var(--color-ink-dark);
    font-size: var(--text-small);

    [aria-current] & {
      color: var(--color-link);
      font-weight: 700;
    }
  }

  .calendar__weekday {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 700;
    text-transform: uppercase;
  }

  .calendar__entry {
    display: flex;
    align-items: baseline;
    column-gap: var(--inline-space);
    color: inherit;
    line-height: var(--leading-snug);
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover .calendar__title {
        text-decoration: underline;
      }
    }
  }

  .calendar__meta {
    display: contents;
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    white-space: nowrap;

    .status {
      font-size: inherit;
    }
  }

  /* A title keeps to one line, and is cut. */
  .calendar__title {
    font-size: var(--text-small);
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}