@layer components {
  body:has(.timeline) {
    background-color: var(--color-canvas);
  }

  .timeline {
    --timeline-spine-width: 8px;
    --timeline-color: var(--color-canvas);
    --timeline-inline-padding: var(--block-space-double);

    opacity: 0;
    padding-inline: var(--timeline-inline-padding);
    margin-inline: calc(-1 * var(--block-space-triple));
    position: relative;

    &:before,
    &:after {
      background-color: var(--color-body);
      content: "";
      inset-block: 1ch 0;
      position: absolute;
      z-index: -1;
    }

    &:before {
      inset-inline: 0 calc(50% + calc(var(--timeline-spine-width) / 2));
    }

    &:after {
      inset-inline: calc(50% + calc(var(--timeline-spine-width) / 2)) 0;
    }

    .hide-in-timeline {
      display: none;
    }

    .mini-card {
      @media (min-width: 70ch) {
        max-inline-size: 35ch;
      }
    }
  }

  .timeline--ready {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .timeline__date-header {
    position: relative;
    margin-inline: calc(var(--timeline-inline-padding) * -1);

    span {
      background-color: var(--timeline-color);
      border-radius: 4px;
      font-size: var(--font-large);
      padding: 0.33em 0.66em;
      position: relative;
    }

    &:before {
      background-color: var(--timeline-color);
      block-size: var(--timeline-spine-width);
      content: "";
      inset: 50% 0 auto 0;
      position: absolute;
      translate: 0 -50%;
    }
  }

  masonry-layout {
    .timeline & {
      justify-content: center;
      padding: 1.5em 0 0.5em;
    }

    &.timeline-masonry--cols-2 {
      &::part(column-0) { align-items: end; }
      &::part(column-1) { align-items: start; }
    }

    &::part(column) {
      --_masonry-layout-gap: var(--block-space);
      align-items: center;
    }
  }

  /* Dialog
  /* ------------------------------------------------------------------------ */

  .timeline-new-dialog {
    grid-area: 1 / 1;
    inline-size: calc(80vw - var(--block-space));
    max-inline-size: 80ch;
  }

  .timeline-new-dialog__buttons {
    display: grid;
    gap: 1ch;
    grid-template-columns: repeat(3, 1fr);

    button {
      background: none;
      border-radius: var(--panel-border-radius);
      border: 0;
      color: var(--color-ink);
      cursor: pointer;
      padding: var(--inline-space);
      text-decoration: none;
    }

    figure {
      aspect-ratio: 16 / 9;
      background-color: var(--color-body);
      border: 1px solid var(--color-theme-light);
      border-radius: var(--panel-border-radius);
      container-type: inline-size;
      display: grid;
      inline-size: 100%;
      margin: 0 0 1ch;
      place-content: center;
    }

    .icon {
      font-size: 25cqi;
    }
  }
}