.objectId-edit-heading {
  @apply btu-button btu-button-fill-none btu-button-primary blokk truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
}

.Grid:has(.LiveBlogGrid),
.Grid:has(.LiveBlogGrid) .Grid-nav,
.LiveBlogPostListNav,
.LiveBlogGrid,
.LiveBlogGrid .Frame-relative {
  @apply contents;
}

.LiveBlogPostList {
  @apply overflow-auto border-e bg-white [grid-area:list];
}

.LiveBlogPostList-open {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left md:hidden;
}

.LiveBlogGrid:not(.is-visible) .LiveBlogPostList-open {
  @apply max-md:hidden;
}

.LiveBlogPostList-button {
  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray my-4;
}

.LiveBlogPostList-titleBar {
  @apply sticky top-0 z-[1] flex items-center gap-2 border-b bg-white px-4 py-2;
}

.LiveBlogPostList-title {
  @apply btu-heading-5 grow;
}

.LiveBlogPostList-controls {
  @apply contents;
}

.LiveBlogPostList-controls
  :where(li:first-child > a:not(.LiveBlogPostListNav-refresh)) {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-plus;
}

.LiveBlogPostList-controls > li > a.is-selected {
  @apply md:btu-button-pressed;
}

.LiveBlogPostListNav-refresh {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-rotate-ccw;
}

/* filters widget */
.LiveBlogPostList-filters.Widget {
  --top: calc(
    theme(spacing.8) + theme(iconSize.md) + theme(borderWidth.DEFAULT)
  );
  @apply sticky top-[--top] z-[1] bg-white;
}

.LiveBlogPostList-filters.Widget.is-collapsible {
  @apply border-b py-2;

  .Widget-title {
    @apply border-b-0 py-1 text-sm;
  }

  .Widget-controls {
    @apply bg-transparent;
  }

  .Widget-controls > .Widget-collapse {
    @apply btu-button-xs touch-device:btu-button-sm;
  }

  > form.LiveBlogPostList-filters-search {
    @apply py-4 [row-gap:0];
  }

  > form:not(.LiveBlogPostList-filters-search) {
    @apply flex flex-col gap-4 pb-2;
  }
}

.LiveBlogPostList-filters.Widget:not(.is-collapsed) {
  .Widget-title {
    @apply bg-primary-50 text-primary-800;
  }

  .Widget-controls > .Widget-collapse {
    @apply btu-button-primary;
  }
}

/* list of existing live blog posts
   Customizes table & LinkList default styles for this specific use case */
.LiveBlogPostList > table.LinkList {
  tr.is-buttoned {
    --bg-color: light-dark(theme(colors.white.light), theme(colors.white.dark));
    @apply grid grid-cols-[theme(avatar.size.sm)_min-content_auto_theme(size.9)] px-4 py-3 @container/item;
  }

  tr > *:not(:first-child) {
    @apply ms-0;
  }

  td {
    @apply p-0;
  }

  .LinkList-main {
    @apply col-span-3 col-start-1 row-start-1 mb-[5px] me-2;
  }

  .LinkList-main > a {
    @apply line-clamp-2 overflow-hidden [word-break:break-word];
  }

  /* Live Blog posts is the only the use case that uses this class in LinkList */
  .LinkList-button {
    @apply col-start-4 row-start-1;
  }

  .LinkList-button > a {
    @apply btu-button-fill-none btu-button-gray bg-white no-underline before:btu-icon before:btu-icon-pin hover:bg-gray-200 focus:bg-white;
  }

  .LinkList-image {
    --avatar-size: theme(avatar.size.sm);
    @apply col-start-1 row-span-2 row-start-2;
  }

  td.date-time {
    @apply col-span-2 row-start-2 ms-[8px] text-xs;
  }

  td:has(.LinkList-icon) {
    @apply overflow-hidden overflow-ellipsis text-nowrap text-xs;
  }

  td:nth-child(5) {
    @apply col-start-2 row-start-3 ms-2 max-w-[calc(100cqw-104px)];
  }

  td:nth-child(5):has(+ td) {
    @apply after:btu-icon after:btu-icon-dot;
  }

  td:nth-child(6) {
    @apply col-start-3 row-start-3 me-2;
  }

  td:nth-child(n + 7) {
    @apply hidden;
  }

  /* pinned posts */
  tr.is-pin:not(.is-selected) {
    @apply border-b-warning-500 bg-warning-50;
  }

  tr.is-pin:not(.is-selected) .LinkList-button > a {
    @apply btu-button-pressed bg-primary-50 hover:bg-primary-50;
  }

  /* new blog post */
  tr.is-new-content {
    --bg-from: theme(colors.success.50);
    --border-from: theme(colors.success.500);
    --bg-to: var(--bg-color);
    --border-to: theme(colors.gray.200);

    @apply animate-list-item-added border-success-500 bg-success-50 hover:[--bg-to:theme(colors.gray.100)];
  }

  /* selected item in live blog post list */
  tr.is-selected {
    --bg-color: theme(colors.primary.50);
    @apply bg-primary-50;
  }

  tr.is-selected .LinkList-main > a {
    @apply text-primary-800;
  }
}

.LiveBlogGrid .ContentEdit-main > .TC .TabBar > .TabBar-item {
  @apply __tab-item-sm;
}

/* hides auto expand textarea that shows up outside of content edit form when a post is published */
.LiveBlogGrid > .frame.is-asideHidden > .AutoExpand {
  @apply hidden;
}

.Page.has-liveBlog-postList {
  @container (min-width: 900px) {
    :is(.Page-content, .Popup-content):has(.ContentEdit) {
      /* LiveBlog Post grid doesn't allow resizing since the post list column is present. */
      .ContentEdit-resizeWrapper {
        @apply pointer-events-none;
      }

      /* Base calculation for content form width */
      --contentForm-w-base: calc(100cqw - var(--right-toolbar-w));

      /* States */
      &:is(
          .is-previewing,
          :has(
              .ContentEdit-toolbar
                button:not([data-right-tab='manage_search']).is-active
            )
        ),
      &.is-previewing:has(
          .ContentEdit-toolbar
            button:not([data-right-tab='manage_search']).is-active
        ),
      &.is-previewing:not(
          :has(
              .ContentEdit-toolbar
                button:not([data-right-tab='manage_search']).is-active
            )
        ) {
        --contentForm-w: 1fr;
        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
      }

      /* Neither preview nor widget - disable resize and reset form width */
      &:not(.is-previewing):not(
          :has(
              .ContentEdit-toolbar
                button:not([data-right-tab='manage_search']).is-active
            )
        ) {
        --contentForm-resized-w: unset;
        .ContentEdit-resizeWrapper {
          @apply pointer-events-none;
        }
      }

      /* Widget only */
      &:not(.is-previewing):has(
          .ContentEdit-toolbar
            button:not([data-right-tab='manage_search']).is-active
        ) {
        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_0px_var(--right-toolbar-w)];
      }
    }
  }
}

.Page.has-liveBlog-postList {
  .Page-main {
    --postlist-w: clamp(300px, 360px, 35cqw);

    :is(.Page-content, .Popup-content) {
      /* Preview column only */
      &.is-previewing {
        --contentForm-resized-w: unset; /* override user's resized width at this container size */
        @apply md:!grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
      }

      /* Neither preview or widget columns are displayed */
      &:not(.is-previewing):not(
          :has(
              .ContentEdit-toolbar
                button:not([data-right-tab='manage_search']).is-active
            )
        ),
      &:not(.is-previewing):has(
          .ContentEdit-toolbar
            button:not([data-right-tab='manage_search']).is-active
        ) {
        --contentForm-resized-w: unset; /* override user's resized width at this container size */
        @apply md:!grid-cols-[var(--postlist-w)_var(--contentForm-w)_0px_var(--right-toolbar-w)];
      }

      /* Both preview and widget columns */
      &.is-previewing:has(
          .ContentEdit-toolbar
            button:not([data-right-tab='manage_search']).is-active
        ) {
        --contentForm-resized-w: unset; /* override user's resized width at this container size */
        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
      }
    }
  }
}
