@brightspot/ui 3.0.1 → 5.0.0

package/src/legacy/tool-ui/src/Page.css

@@ -0,0 +1,884 @@
+:root {
+  --page-broadcast-h: 0px;
+  --page-broadcastAlert-h: 0px;
+  --page-env-h: 22px;
+  --page-header-h: 68px;
+  --page-title-h: 0px;
+  --pageNav-expanded-OFF: initial;
+  --pageNav-expanded-ON: 240px;
+  --pageNav-expanded: var(--pageNav-expanded-OFF);
+  --pageNav-item-icon-size: 20px;
+}
+
+.Page {
+  /* A toggle property to show/hide the right-rail. initial state is the second param. */
+  --has-right-rail: var(--toggles-right-rail, 0px);
+  --right-rail-w: 360px;
+  /* the collapsed width. on mobile it has no width, on larger screens it becomes a narrow strip. */
+  --pageNav-w-sm: 0px;
+  --pageNav-w: var(--pageNav-expanded, var(--pageNav-w-sm));
+  --page-title-h: 68px;
+
+  @apply fixed grid w-full overflow-hidden bg-gray-200 text-gray-600 transition-all duration-250 ease-linear [column-gap:1px] [grid-template:'broadcast'_minmax(0,_auto)_'stack'_1fr] max-md:h-full md:h-dvh md:min-h-dvh md:w-[100vw] md:[--pageNav-w-sm:68px];
+
+  .Page-askAiLink {
+    @apply hidden;
+  }
+
+  &:where(.is-guideOpen) {
+    /* This turns ON the toggle */
+    --toggles-right-rail: var(--has-right-rail);
+    .Page-guide {
+      @apply block max-md:visible max-md:z-[12];
+    }
+  }
+
+  &:where(.is-askAiOpen) {
+    /* This turns ON the toggle */
+    --toggles-right-rail: var(--has-right-rail);
+
+    .Page-askAiLink {
+      @apply btu-button-pressed;
+    }
+  }
+
+  &.is-broadcasting {
+    --page-broadcast-h: 52px;
+  }
+
+  &.is-alertBroadcasting {
+    --page-broadcastAlert-h: 52px;
+  }
+}
+
+.Page.has-navrail-expanded {
+  @apply max-md:overflow-hidden;
+}
+
+.Page.has-navrail-expanded .Page-main > btu-nav-rail {
+  @apply visible max-md:[transform:translate(0)];
+}
+
+/* Only animate the rail when the user explicitly toggles it — not on viewport resize. */
+.Page.is-nav-animating .Page-main > btu-nav-rail {
+  @apply max-md:transition-[transform,visibility] max-md:duration-500 max-md:ease-linear max-md:will-change-transform;
+}
+
+.Page-broadcastAlert {
+  @apply flex max-h-[--page-broadcastAlert-h] border-b border-b-error-200 bg-error-25 p-4 text-sm leading-4 text-error-600 before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)] md:col-span-full;
+}
+
+.Page-broadcastAlert a {
+  @apply text-error-700;
+}
+
+.Page-broadcastAlert-messages {
+  @apply me-auto overflow-y-hidden overflow-x-scroll;
+}
+
+.Page-broadcastAlert .pagination {
+  @apply ms-4 shrink-0 items-center border-0 bg-inherit;
+
+  .previous,
+  .pagination-count,
+  .next {
+    @apply border-0;
+  }
+
+  .previous {
+    @apply ms-auto;
+  }
+
+  .pagination-count {
+    @apply !px-2;
+  }
+
+  .next a {
+    @apply !pr-0;
+  }
+}
+
+.Page-broadcast {
+  @apply max-h-[--page-broadcast-h] overflow-y-hidden overflow-x-scroll border-b border-b-warning-200 bg-warning-25 p-4 text-sm leading-4 text-warning-700 [--link-color:theme(colors.warning.800)] before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-warning-800 md:col-span-full;
+
+  /*
+    Submitting a form inside a broadcast (Ex: Stop scheduling)
+    The loader should replace the banner alert icon
+  */
+  &:has(form.is-submitting button.is-clicked) {
+    @apply before:btu-loader before:inline-block before:size-5;
+
+    form.is-submitting button.is-clicked {
+      @apply before:hidden;
+    }
+  }
+}
+
+.Container-broadcast {
+  @apply flex flex-col overflow-hidden text-nowrap [grid-area:broadcast] md:col-span-full;
+}
+
+.Alert-badge {
+  @apply btu-badge-warning btu-badge-sm me-2;
+}
+
+.Page-navToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray order-first inline-block min-w-[--button-size-sm] before:btu-icon before:btu-icon-panel-left-open rtl:before:btu-icon-panel-right-open;
+
+  &[aria-expanded='true'] {
+    @apply before:btu-icon-panel-left-close rtl:before:btu-icon-panel-right-close;
+  }
+}
+
+.Page-env {
+  @apply me-auto hidden min-w-full bg-gray-100 text-xs font-medium md:btu-badge-gray md:btu-badge-sm max-md:-mx-2 max-md:h-[--page-env-h] max-md:px-2 max-md:py-[2px] max-md:text-center max-md:[flex:1_0_100%] md:order-2 md:block md:min-w-max;
+}
+
+.Page-guideLink {
+  a {
+    @apply relative flex h-full items-center overflow-hidden whitespace-nowrap font-semibold;
+  }
+}
+
+.Page.has-navrail-expanded .Page-guideLink {
+  a {
+    @apply text-sm no-underline;
+  }
+}
+
+.Page-search {
+  @apply relative order-3 flex md:w-full md:justify-end md:@container/page-search;
+  .SearchInput {
+    @apply md:w-[clamp(10rem,64cqi,41.5rem)];
+  }
+}
+
+.Page-title {
+  --logo-size: 36px;
+  @apply flex items-center text-sm font-semibold max-md:pe-4 md:grid md:max-w-60 md:shrink-0 [&_a]:font-semibold [&_a]:text-inherit [&_a]:no-underline [&_a]:hover:text-inherit [&_a]:focus:text-inherit;
+
+  > a {
+    @apply grid auto-cols-[0px] grid-flow-col grid-cols-[max-content] items-center justify-center rounded-lg text-[0] @[80px]:grid-cols-[max-content_minmax(0,1fr)_max-content] max-md:grow;
+
+    /* Displays site name if site switcher is missing (e.g. user has access to only 1 site) */
+    .Page-siteName {
+      @apply hidden @[80px]:col-[2/3] @[80px]:line-clamp-1 @[80px]:block @[80px]:truncate @[80px]:px-2 @[80px]:text-sm;
+    }
+  }
+
+  > a:hover a[target='siteSwitch'] {
+    @apply after:bg-gray-100;
+  }
+
+  a[target='siteSwitch'] {
+    @apply absolute inset-0 size-full focus:ring-offset-0 focus:border-transparent focus:ring-0 @[80px]:static @[80px]:inset-[unset] @[80px]:col-[2/3] @[80px]:grid @[80px]:grid-cols-[minmax(0,1fr)_auto] @[80px]:items-center @[80px]:gap-2 @[80px]:px-2 @[80px]:text-sm max-md:px-4;
+
+    /* Chevron after the site name */
+    @apply after:btu-icon after:btu-icon-chevron-down after:absolute after:left-[36%] after:top-[31%] after:flex after:size-5 after:items-center after:justify-center after:rounded-lg after:border after:border-gray-200 after:bg-white after:shadow-lg after:[--icon-size:1.1rem] after:[transform:translate(50%,50%)] @[80px]:after:static @[80px]:after:size-7 @[80px]:after:transform-none @[80px]:after:border-0 @[80px]:after:bg-transparent @[80px]:after:shadow-none;
+
+    /* Site switcher's focus state is ring around chevron icon */
+    @apply focus-visible:after:ring-primary-100 focus-visible:after:border focus-visible:after:border-primary-600 focus-visible:after:ring-4 more-contrast:focus-visible:after:border-primary-400 more-contrast:focus-visible:after:ring-primary-400;
+
+    > span {
+      @apply hidden @[80px]:line-clamp-1 @[80px]:truncate;
+    }
+  }
+
+  /* When the site switcher is visible style its trigger element to indicate that. */
+  a[target='siteSwitch'].is-active {
+    @apply after:btu-icon-chevron-up after:bg-primary-50 after:text-primary-800;
+  }
+
+  /* Homepage link button */
+  a[target='_blank'] {
+    @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs pointer-events-auto col-[3/4] hidden shrink-0 bg-white before:btu-icon before:btu-icon-link-2 touch-device:btu-button-sm hover:bg-gray-100 @[80px]:inline-flex;
+  }
+
+  .toolUserSite,
+  .Page-site {
+    @apply contents;
+  }
+
+  img {
+    @apply col-[1/2] size-[var(--logo-size)] rounded-lg bg-white object-contain p-1 shadow-sm;
+  }
+
+  /* Display a default Brightspot logo when a site logo isn't present */
+  &:not(:has(img)) > a {
+    @apply before:col-[1/2] before:size-[var(--logo-size)] before:rounded-lg before:bg-white before:bg-center before:bg-no-repeat before:p-4 before:shadow-sm;
+    @apply before:bg-site-logo-default;
+  }
+}
+
+.Page-header {
+  @apply flex w-full items-center justify-end overflow-hidden border-b bg-white p-4 text-gray-700 max-md:gap-4 md:h-[var(--page-header-h)] md:flex-nowrap md:@container/page-header;
+  grid-area: header;
+}
+
+.Page-header > * {
+  @apply md:!me-4;
+}
+
+.Page-header.mobile:has(.Page-search[aria-expanded='true'])
+  > *:not(.Page-navToggle):not(.Page-search):not(.Page-env) {
+  @apply hidden;
+}
+
+@scope (.Page-header.mobile) {
+  & .Page-search {
+    @apply z-10 max-w-full flex-row-reverse;
+  }
+}
+
+.Page-header.mobile .SearchInput {
+  @apply min-w-max;
+}
+
+/*
+  Captures the state when Page-header is:
+  not mobile and in either Content Edit mode or LiveBlog mode eg:(.Page-content > .Grid)
+*/
+.Page-header:not(.mobile):has(
+    + .Page-content > .content-edit,
+    + .Page-content > .Grid
+  ) {
+  .Page-search {
+    @apply w-0 max-w-0 flex-grow-0;
+  }
+  .Page-search .SearchInput {
+    @apply opacity-0;
+  }
+  .Page-search[aria-expanded='true'] {
+    @apply w-full max-w-[unset] justify-center @container;
+  }
+}
+
+/*
+  Page-header should scroll out of view when the content edit form is scrolled down.
+  Mobile-only style.
+*/
+.Page-header.mobile {
+  @apply transition-[transform,_opacity] duration-300 ease-spring-stiff;
+
+  ~ .Page-container {
+    .ContentEdit-overlay,
+    .ContentEdit-title--v5 > .ContentEdit-status--v5,
+    .ContentEdit-title--v5 > .ContentEdit-contentType--v5 {
+      @apply transition-[transform,_display] duration-300 ease-spring-stiff [transition-behavior:allow-discrete];
+    }
+  }
+
+  &.is-scrolled {
+    @apply -translate-y-full opacity-0;
+
+    /* Hide the content type, status badge, and overlay selector on scroll */
+    ~ .Page-container {
+      .ContentEdit-overlay,
+      .ContentEdit-title--v5 > .ContentEdit-status--v5,
+      .ContentEdit-title--v5 > .ContentEdit-contentType--v5 {
+        @apply hidden -translate-y-[200%];
+      }
+    }
+  }
+}
+
+.Page-main:has(> .Page-header.mobile) {
+  @apply transition-[grid-template-rows] duration-300 ease-spring-stiff;
+
+  &:has(> .Page-header.mobile.is-scrolled) {
+    @apply grid-rows-[0px_1fr];
+  }
+}
+
+/*
+  Captures the state when Page-header is:
+  mobile or in Content Edit mode or LiveBlog mode eg:(.Page-content > .Grid)
+*/
+.Page-header.mobile,
+.Page-header:has(+ .Page-content > .content-edit, + .Page-content > .Grid) {
+  .SearchInput {
+    @apply pointer-events-none block [--tw-scale-x:0] [--tw-translate-x:0] [opacity:0] [transform-origin:right] [transform:translate(var(--tw-translate-x),var(--tw-translate-y))_scaleX(var(--tw-scale-x))_scaleY(var(--tw-scale-y))] [transition:opacity_0.15s_ease-out,_transform_0.3s_cubic-bezier(0.4,0,0.2,1)];
+  }
+
+  .Page-search {
+    @apply flex-grow items-center justify-end gap-2 @container-normal;
+  }
+
+  .Page-search > button {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray ms-auto inline-block min-w-[--button-size-sm] opacity-100 [transition:display_.2s_allow-discrete_.3s,_opacity_.2s_.3s] before:btu-icon before:btu-icon-search;
+
+    @starting-style {
+      & {
+        @apply opacity-0;
+      }
+    }
+  }
+
+  .Page-search[aria-expanded='true'] {
+    @apply overflow-visible;
+
+    & > button {
+      @apply hidden opacity-0 transition-none;
+    }
+
+    .SearchInput {
+      @apply pointer-events-auto z-10 inline-block [--tw-scale-x:1] [opacity:1] [transition:opacity_0.2s_cubic-bezier(0.4,0,0.2,1),_transform_0.3s_cubic-bezier(0.4,0,0.2,1)];
+    }
+  }
+}
+
+/* Prioritizes showing the content title|type|status and tucks away the search input */
+
+.SearchInput label {
+  @apply before:text-gray-700;
+}
+
+.Page-main {
+  @apply grid w-full overflow-hidden @container/main [grid-area:stack] [grid-template-areas:"header"_"stack"] max-md:h-full max-md:[grid-template-rows:68px_1fr] md:[grid-template-areas:'header_header_header_header'_'nav_guidePanel_aiPanel_content'] md:[grid-template-columns:var(--pageNav-w)_minmax(0,auto)_minmax(0,auto)_1fr] md:[grid-template-rows:var(--page-header-h)_1fr];
+}
+
+.Page-main > btu-nav-rail {
+  @apply [grid-area:stack] max-md:invisible max-md:z-[21] max-md:h-full max-md:[grid-area:stack] max-md:[transform:translate(-100vw,0)] md:border-r md:[grid-area:nav];
+
+  > ul > li > ul > li,
+  > ul > li:not(:has(ul)) :where(a, button) {
+    @apply size-[36px] justify-center gap-0 @[80px]:h-auto @[80px]:min-h-[--item-h] @[80px]:w-full @[80px]:justify-normal @[80px]:gap-2;
+  }
+
+  #toolUserAvatarProfile-link {
+    /* Avatar opts out of the items-start + pt/pb rule so the 32px tile stays centered. */
+    @apply size-[32px] p-0 @[80px]:w-full @[80px]:items-center @[80px]:py-0;
+  }
+
+  .Avatar {
+    @apply grid size-[32px] rounded-md;
+  }
+
+  /* Profile avatar image */
+  .Avatar > img {
+    @apply rounded-md;
+  }
+
+  /* Text if the avatar has no image */
+  .Avatar > span {
+    @apply text-md;
+  }
+
+  /* A nested group of items */
+  > ul > li > ul > li:has(ul) {
+    @apply @[80px]:h-auto;
+  }
+
+  /* The parent of a group of expandable items */
+  > ul > li > ul > li:has(ul) > a {
+    @apply min-h-[--item-h] font-semibold @[80px]:flex;
+  }
+
+  /* A nested group of (unexpanded/hidden) items */
+  > ul > li > ul > li[aria-expanded='false'] > ul {
+    @apply hidden h-0 overflow-hidden;
+  }
+
+  /* A nested group of (expanded/visible) items */
+  > ul > li > ul > li[aria-expanded='true'] > ul {
+    @apply hidden h-auto overflow-visible @[80px]:grid @[80px]:ps-2 @[80px]:[grid-template-columns:24px_1fr];
+  }
+
+  /* A selected item */
+  li.selected {
+    & > a {
+      @apply bg-primary-50 text-gray-900 more-contrast:bg-primary-900 more-contrast:text-white;
+    }
+
+    btu-icon {
+      @apply more-contrast:bg-white more-contrast:bg-none;
+    }
+  }
+
+  /* An individual child of a group */
+  > ul > li > ul > li > ul > li {
+    @apply contents @[80px]:before:[background-image:linear-gradient(theme(colors.gray.300),theme(colors.gray.300))] @[80px]:before:[background-position:center] @[80px]:before:[background-repeat:no-repeat] @[80px]:before:[background-size:1px];
+
+    &::before {
+      @apply col-[1];
+    }
+
+    a {
+      @apply col-[2] mt-2 h-min p-2 font-semibold;
+    }
+  }
+
+  /* Hide the link labels when the navigation is collapsed */
+  a > span {
+    @apply hidden @[80px]:inline-block;
+  }
+
+  .Page-navItemToggle {
+    @apply ms-auto hidden transition-all @[80px]:inline-block;
+  }
+
+  li[aria-expanded='true'] .Page-navItemToggle {
+    @apply rotate-180;
+  }
+
+  .Page-avatar {
+    a {
+      @apply justify-self-center text-[0] @[80px]:pl-[4px] @[80px]:text-sm;
+    }
+
+    .ToolUserAvatar-name {
+      @apply block;
+    }
+  }
+
+  .Page-guideLink,
+  .Page-notifications {
+    @apply contents;
+  }
+
+  .Page-askAiButton {
+    @apply btu-button-primary flex-wrap text-[0] [line-height:0px] @[80px]:indent-[5px] @[80px]:text-sm;
+  }
+
+  .Page-askAiLink {
+    @apply block;
+  }
+}
+
+.Page-container {
+  @apply w-full overflow-hidden bg-white max-md:h-full max-md:max-h-full max-md:[grid-area:stack] md:h-full md:overflow-auto md:[grid-area:content];
+}
+
+/* This ensures the non content edit pages that have Page container parent still retain sticky action bars and vertical scrolling */
+.Page-content {
+  @apply h-full max-md:overflow-hidden max-md:overflow-y-auto md:overflow-auto;
+}
+
+/* Prevent Page scrolling while a dashboard widget is maximized */
+.Page.has-dashboardWidgetMaximized .Page-content {
+  @apply overflow-hidden;
+}
+
+.Page-container {
+  @apply @container/PageContainer;
+}
+
+.Page.is-editing .Page-content,
+.Popup-content.is-editing {
+  /* if the guide is open, make sure to account for its width. */
+  --guide-w: var(--has-right-rail, var(--right-rail-w));
+  --toolbar-h-mobile: 52px;
+  /*
+    motion-reduce: 0.001s instead of 0s so `transitionend` still fires on this
+    container. ContentEdit.js listens for it to move focus to the panel close
+    button after the grid-template-columns transition completes.
+  */
+  @apply grid h-full overscroll-none transition-all motion-reduce:!duration-[0.001s] max-md:overflow-hidden max-md:[grid-template:"top"_min-content_"status"_min-content_"content"_1fr_"bottom"_var(--toolbar-h-mobile)/_100vw] md:grid-rows-[auto_1fr] md:overflow-hidden md:[grid-template-areas:'top_top_top_top''left_preview_right_toolbar''left_preview_right_toolbar'];
+
+  .Page-background {
+    @apply hidden;
+  }
+
+  .ContentEdit-resizeWrapper {
+    @apply pointer-events-none;
+  }
+}
+
+/* Modify grid columns based on state */
+.Page.is-editing .Page-content,
+.Popup-content.is-editing {
+  /* Preview column only */
+  &.is-previewing {
+    --contentForm-resized-w: unset; /* override user's resized width at this container size */
+    @apply md:grid-cols-[var(--contentForm-w)_1fr_0px_var(--right-toolbar-w)];
+  }
+
+  /* Neither preview or widget columns are displayed */
+  &:not(.is-previewing):not(.has-widget-panel-open) {
+    --contentForm-resized-w: unset; /* override user's resized width at this container size */
+    @apply md:grid-cols-[var(--contentForm-w)_0px_0px_var(--right-toolbar-w)];
+  }
+
+  /* Widget column only */
+  &:not(.is-previewing).has-widget-panel-open {
+    --contentForm-resized-w: unset; /* override user's resized width at this container size */
+    @apply md:grid-cols-[var(--contentForm-w)_0px_1fr_var(--right-toolbar-w)];
+  }
+
+  /* Both preview and widget columns */
+  &.is-previewing.has-widget-panel-open {
+    --contentForm-resized-w: unset; /* override user's resized width at this container size */
+    @apply md:grid-cols-[var(--contentForm-w)_1fr_0px_var(--right-toolbar-w)];
+  }
+}
+
+@container (min-width: 900px) {
+  .Page.is-editing .Page-content,
+  .Popup-content.is-editing {
+    /* Enable resize wrapper by default at this size */
+    .ContentEdit-resizeWrapper {
+      @apply pointer-events-auto;
+    }
+
+    /* Base calculation for content form width */
+    --contentForm-w-base: calc(100cqw - var(--right-toolbar-w));
+
+    /* States */
+    &:is(.is-previewing, .has-widget-panel-open) {
+      --contentForm-w: calc(
+        var(--contentForm-w-base) - var(--contentWidget-w-min)
+      );
+    }
+
+    /* Neither preview nor widget - disable resize and reset form width */
+    &:not(.is-previewing):not(.has-widget-panel-open) {
+      --contentForm-resized-w: unset;
+      .ContentEdit-resizeWrapper {
+        @apply pointer-events-none;
+      }
+    }
+
+    /* Both preview and widget */
+    &.is-previewing.has-widget-panel-open {
+      --contentForm-w: calc(
+        var(--contentForm-w-base) - var(--contentPreview-w-min) -
+          var(--contentWidget-w-min)
+      );
+      /* Safe widths' maximum is the form max, minus the min width of the visible columns (preview & widget) */
+      --contentForm-resized-safe-w: clamp(
+        var(--contentForm-w-min),
+        var(--contentForm-resized-w),
+        calc(
+          var(--contentForm-w-max) - var(--contentPreview-w-min) -
+            var(--contentWidget-w-min)
+        )
+      );
+      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_1fr_1fr_var(--right-toolbar-w)];
+    }
+
+    /* Preview only */
+    &.is-previewing:not(.has-widget-panel-open) {
+      /* Safe widths' maximum is the form max, minus the min width of the visible column (preview) */
+      --contentForm-resized-safe-w: clamp(
+        var(--contentForm-w-min),
+        var(--contentForm-resized-w),
+        calc(var(--contentForm-w-max) - var(--contentPreview-w-min))
+      );
+      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_1fr_0px_var(--right-toolbar-w)];
+    }
+
+    /* Widget only */
+    &:not(.is-previewing).has-widget-panel-open {
+      /* Safe widths' maximum is the form max, minus the min width of the visible column (widget) */
+      --contentForm-resized-safe-w: clamp(
+        var(--contentForm-w-min),
+        var(--contentForm-resized-w),
+        calc(var(--contentForm-w-max) - var(--contentWidget-w-min))
+      );
+      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_0px_1fr_var(--right-toolbar-w)];
+    }
+  }
+}
+
+/*
+  Establish a minimum width for the content edit right rail widgets
+  so they can overflow when the containing column is too small. */
+.ContentEdit-right btu-widget,
+.ContentEdit-right-top {
+  min-width: var(--contentWidget-w-min);
+}
+
+.Page.is-editing .Page-content.has-message {
+  @apply md:grid-rows-[auto_var(--edit-banner-h)_1fr] md:[grid-template-areas:'top_top_top_top''banner_banner_banner_banner''left_preview_right_toolbar''left_preview_right_toolbar'];
+}
+
+/* Page grid & Page-header style updates for Live Blog Posts */
+.Page.is-editing.has-liveBlog-postList .Page-main {
+  @apply max-md:[grid-template:"stack"_1fr];
+
+  .Page-header,
+  btu-nav-rail,
+  .LiveBlogPostList,
+  .LiveBlogGrid {
+    @apply max-md:hidden;
+  }
+
+  .ContentEdit-toolbar li:not(:has(.ContentEdit-previewButtonWrapper)) {
+    @apply hidden;
+  }
+
+  .LiveBlogPostListNav.is-visible .LiveBlogPostList {
+    @apply max-md:block;
+  }
+
+  .LiveBlogGrid.is-visible {
+    @apply max-md:contents;
+  }
+
+  .Page-content {
+    @apply max-md:[grid-template:"back"_52px_"top"_min-content_"status"_min-content_"content"_1fr_"bottom"_var(--toolbar-h-mobile)/100vw] md:grid-rows-[auto_auto_1fr] md:[grid-template-areas:'back_back_back_back''list_top_top_top''list_left_preview_toolbar'];
+  }
+
+  .Page-content:has(.ContentEdit-top + .Message) {
+    @apply grid-rows-[auto_auto_var(--edit-banner-h)_1fr] md:[grid-template-areas:'back_back_back_back''list_top_top_top''list_banner_banner_banner''list_left_preview_toolbar'];
+  }
+
+  &:has(.LiveBlogPostListNav.is-visible) {
+    .Page-content {
+      @apply max-md:[grid-template:"back"_52px_"list"_1fr];
+    }
+  }
+
+  .ContentEdit-contentType--v5 {
+    @apply max-md:ms-5;
+  }
+}
+
+.Page,
+.Popup {
+  .is-asideHidden .ContentEdit-right.is-visible {
+    @apply hidden;
+  }
+}
+
+.Page-guide {
+  @apply hidden h-full overflow-auto border-r border-gray-200 bg-gray-50 max-md:invisible max-md:[grid-area:stack] md:w-[var(--has-right-rail,var(--right-rail-w))] md:[grid-area:guidePanel];
+
+  > .frame {
+    @apply h-full overflow-y-hidden;
+  }
+}
+
+/* AskAI panel with content loaded (active). Different from the container just in the DOM by default. */
+.Page-askAi.is-loaded {
+  @apply h-full overflow-auto border-gray-200 bg-gray-50 max-md:visible max-md:z-[13] md:w-[var(--has-right-rail,var(--right-rail-w))];
+
+  > .frame {
+    @apply h-full overflow-y-hidden;
+  }
+}
+
+.toolUserSiteControls {
+  @apply hidden;
+}
+
+@keyframes bell-shake {
+  0%,
+  100% {
+    scale: 0.84333;
+    transform: rotate(0deg);
+  }
+  20%,
+  60% {
+    transform: rotate(15deg);
+  }
+  40%,
+  80% {
+    transform: rotate(-15deg);
+  }
+}
+
+/* Animate the bell icon when there are new notifications */
+.Page-notifications[data-new='true'] btu-icon {
+  /* Set the pivot point for rotation */
+  @apply [animation:bell-shake_1s_500ms_cubic-bezier(0.45,0.05,0.55,0.95)_2] [transform-origin:top_center];
+}
+
+.Page-notifications[data-new='true'] > a {
+  @apply relative after:absolute after:left-[19px] after:top-[0px] after:z-[2] after:block after:size-[13px] after:rounded-full after:border-[2px] after:border-white after:bg-error-600 after:[scale:1] @[80px]:after:left-[21px];
+
+  &::after {
+    @apply [transition:opacity_200ms_2s_cubic-bezier(0.64,0,0.78,0),_scale_350ms_2s_cubic-bezier(0.34,1.56,0.64,1)];
+  }
+
+  @starting-style {
+    &::after {
+      @apply opacity-0 [scale:0];
+    }
+  }
+}
+
+.toolUser,
+.toolUserDisplay,
+.toolUserSite {
+  @apply contents;
+}
+
+.toolUserControls,
+.toolUserSiteControls,
+.Page-user {
+  @apply hidden;
+}
+
+.Popup[name='siteSwitch'] {
+  @apply !left-4;
+
+  /* Hide the site switcher widget title in v5 */
+  .Widget .Widget-title {
+    @apply hidden;
+  }
+
+  .siteSwitch-header {
+    --logo-size: 36px;
+    @apply grid text-pretty border-b border-b-gray-200 px-4 py-3 [grid-column-gap:0.75rem] [grid-column:fullbleed-start_/_fullbleed-end] [grid-template-columns:var(--logo-size)_auto];
+
+    a {
+      @apply text-sm font-normal leading-4 text-gray-500;
+    }
+  }
+
+  .siteSwitch-name {
+    @apply btu-heading-5;
+  }
+
+  .siteSwitch-logo {
+    @apply [grid-row:1/3];
+    /* Display a default Brightspot logo when a site logo isn't present */
+    &:not(:has(img)) {
+      @apply before:block before:size-[var(--logo-size)] before:rounded before:bg-white before:bg-center before:bg-no-repeat before:p-4 before:shadow-sm;
+      @apply before:bg-site-logo-default;
+    }
+
+    img {
+      @apply size-[var(--logo-size)] rounded bg-white object-contain p-1 shadow-sm;
+    }
+  }
+}
+
+.Page.is-unauthenticated {
+  @apply block bg-white md:[--Page-loginWidth:320px];
+
+  .Page-background {
+    @apply absolute bottom-0 left-0 right-[--Page-loginWidth] top-0 block overflow-clip rounded-r-2xl [background-position:top] [background-size:cover];
+  }
+
+  .Page-header {
+    @apply contents;
+  }
+
+  .Page-env {
+    @apply absolute z-10 max-md:m-0 md:right-5 md:top-5 md:mr-0;
+  }
+
+  .Page-title {
+    @apply visible absolute bottom-[55dvh] top-auto z-10 order-2 flex w-full transform-none items-center justify-start ps-6 @container-normal md:bottom-[56dvh] md:right-0 md:m-[unset] md:w-[--Page-loginWidth];
+  }
+
+  .Page-title img {
+    @apply max-w-full rounded-none shadow-none [--logo-size:auto];
+  }
+
+  .Page-content {
+    @apply absolute inset-0 bg-white;
+  }
+
+  .Page-login {
+    @apply w-full bg-transparent pt-[45dvh] max-md:inset-0 md:absolute md:bottom-0 md:right-0 md:top-0 md:w-[--Page-loginWidth] md:bg-white md:[grid-auto-rows:min-content];
+  }
+
+  .Page-login > h1 {
+    @apply hidden;
+  }
+
+  .Page-login > :where(.Message, form) {
+    @apply grid-rows-[auto] [grid-column:content-start/content-end];
+  }
+
+  .Page-login .inputLabel {
+    @apply text-sm font-semibold;
+  }
+
+  .Page-login input[type] {
+    @apply w-full border-transparent bg-gray-100 focus:border-primary-600;
+  }
+
+  .Page-login .ActionBar {
+    @apply border-none bg-transparent px-0 md:justify-end;
+  }
+
+  .Page-login .ActionBar .action-logIn {
+    @apply basis-full md:basis-auto;
+  }
+
+  button.ShowPassword-toggle {
+    @apply absolute right-[1px]; /* account for border-w. */
+  }
+
+  /* Hides the vertical border to the left of the input which is standard for CIG rows. */
+  .CIG-row::after {
+    @apply hidden;
+  }
+
+  .Page-login .buttons a {
+    @apply pointer-events-auto;
+  }
+}
+
+.Page-loginDialog .CIG-row:focus-within:after {
+  @apply hidden;
+}
+
+.Page-loginDialog .Page-login {
+  @apply rounded-lg md:min-w-[500px];
+}
+
+.Page-loginDialog > dialog .Widget-title {
+  @apply mb-3 rounded-t-lg py-4;
+}
+
+.Page-loginDialog > dialog .Message.is-error {
+  @apply mb-5 rounded-lg border [grid-column:content-start_/_content-end];
+}
+
+.Page-loginDialog > dialog .Widget-logo {
+  @apply my-3 max-w-[35vw];
+}
+
+.Page-loginDialog > dialog .Page-login > form > *:not(.CIG-row) {
+  @apply m-0;
+}
+
+.Page-loginDialog > dialog .Page-login > form > .ActionBar {
+  @apply mt-4 rounded-b-lg;
+}
+
+.Page-create {
+  @apply order-last !me-0;
+
+  .ComboInput {
+    @apply flex-row-reverse gap-0 overflow-visible border-0 p-0;
+
+    .ComboInput-filter {
+      @apply invisible block w-0 origin-right scale-x-0 transition-transform;
+    }
+
+    .ComboInput-label {
+      @apply shrink-0 transition;
+    }
+
+    &[aria-expanded='true'] {
+      @apply !w-[150px] [box-shadow:none];
+
+      .ComboInput-label {
+        @apply block bg-primary-50 [transform:rotate(-225deg)];
+      }
+
+      .ComboInput-filter {
+        @apply visible mr-2 w-full scale-x-100 rounded-lg px-4 py-2 ring-4;
+      }
+    }
+  }
+
+  .ComboInput-icon {
+    @apply hidden;
+  }
+}
+
+.Page-create .ComboInput-label {
+  --button-border-radius: 50%;
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-plus;
+}
+
+.button--aria-skip {
+  @apply btu-button btu-button-fill-none btu-button-primary z-[100] m-4 bg-white;
+}