@layer components {
  .pagination-link {
    display: block;
    flex: 1;
    min-block-size: 1.5rem;
    pointer-events: none;
    text-decoration: none;

    .spinner {
      display: none;
    }

    &.pagination-link--active-when-observed {
      block-size: 0;
      inline-size: 0;
      overflow: hidden;
      visibility: hidden;

      turbo-frame:has(&):has(~ turbo-frame) & {
        display: none;
      }
    }
  }

  .pagination-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 3rem;
    inline-size: 100%;

    .spinner {
      display: block;
      block-size: 1.5rem;
      inline-size: 1.5rem;
    }
  }

  .day-timeline-pagination-link {
    block-size: 1px;
    display: block;
    inline-size: 1px;
    overflow: clip;
  }
}