.Revisions-list {
  @apply grid auto-rows-max grid-cols-subgrid ![grid-column:fullbleed-start/fullbleed-end];
}

.Revisions-list > * {
  @apply [grid-column:fullbleed-start/fullbleed-end];
}

.Revisions-listItem {
  /*
    By default the status colors are gray unless:
    - the user customizes the status color
    - a status is set
  */
  --background: theme(colors.gray.100);
  --foreground: theme(colors.gray.700);
  @apply border-t border-gray-200 p-4 [--branch-size:1.75rem];
}

.Revisions-listItem.is-archived {
  --background: theme(colors.error.50);
  --foreground: theme(colors.error.700);
}

.Revisions-listItem.is-draft {
  --background: theme(colors.primary.50);
  --foreground: theme(colors.primary.700);
}

.Revisions-listItem.is-revision {
  --background: theme(colors.purple.50);
  --foreground: theme(colors.purple.700);
}

.Revisions-listItem.is-scheduled {
  --background: theme(colors.warning.50);
  --foreground: theme(colors.warning.700);
}

.Revisions-listItem.is-live,
.Revisions-listItem.is-updated {
  --background: theme(colors.success.50);
  --foreground: theme(colors.success.700);
}

.Revisions-listItem.is-workflow {
  --background: theme(colors.gray.100);
  --foreground: theme(colors.gray.700);
}

.Revisions-listItem.is-active {
  @apply bg-primary-50;
}

.Revisions-listItem.is-active > .Revisions-listItem-children,
.Revisions-listItem-children
  .Revisions-listItem.is-active
  > .Revisions-listItemInfo {
  @apply pt-4;
}

.is-parentRevision .Revisions-workflowComment {
  @apply bg-gray-100;
}

.Revisions-listItem:has(> .Revisions-listItemInfo .Revisions-more.is-active) {
  @apply z-10;
}

.Revisions-listItem.is-parentRevision.is-active,
.Revisions-listItem-children .Revisions-listItem.is-active {
  @apply before:absolute before:-inset-4 before:bg-primary-50 before:[grid-column:1/-1] before:[grid-row:1/1] before:[inset-inline-start:-100%];
}

.Revisions-listItem-children .Revisions-listItem.is-active {
  @apply relative before:top-0;
}

.Revisions-listItem.is-log {
  @apply grid grid-cols-[min-content_1fr] gap-x-[0.3rem] ps-2 before:btu-icon before:btu-icon-workflow before:items-start before:px-1 before:[grid-column:1];
}

.Revisions-listItem.is-log.is-child {
  @apply z-auto;
}

.Revisions-listItem.is-log .Revisions-listItemInfo {
  @apply col-start-2 gap-[0.38rem];
}

/* The last item in the list should have a border top AND bottom. */
.Revisions-listItem:not(:has(+ .Revisions-listItem)) {
  @apply border-b border-gray-200;
}

.Revisions-listItem-collapseButton {
  @apply btu-button btu-button-text-hidden btu-button-xs items-center p-0 [--button-size-sm:var(--branch-size)] before:btu-icon before:btu-icon-chevron-right touch-device:btu-button-sm rtl:before:btu-icon-chevron-left before:duration-250 before:ease-linear before:[transition:transform];
}

.Revisions-listItem-collapseButton.is-active {
  @apply before:rotate-90;
}

.Revisions-compare {
  @apply btu-button-text-hidden before:btu-icon before:btu-icon-arrow-right;
}

.Revisions-listItem.is-parentRevision {
  @apply relative grid overflow-clip ps-2 [column-gap:0.3rem] [grid-template-columns:min-content_1fr] after:pointer-events-none after:absolute after:left-[0px] after:top-[--branch-size] after:h-[calc(100%_-_2.75rem)] after:w-[--branch-size] after:bg-no-repeat after:transition-opacity after:duration-300 after:[background-image:linear-gradient(theme(colors.gray.300),theme(colors.gray.300))] after:[background-position:center_0px] after:[background-size:1px_100%] after:[grid-column:1] after:[grid-row-start:1];
}

/* Expanded state of toggle button */
.Revisions-listItem:has(.Revisions-listItem-collapseButton.is-active) {
  @apply pb-0 after:opacity-100;
}

/* Collapsed state of toggle button */
.Revisions-listItem:has(.Revisions-listItem-collapseButton:not(.is-active)) {
  @apply after:opacity-0;
}

/* Expanded parent */
.Revisions-listItem:has(.Revisions-listItem-collapseButton.is-active) {
  @apply bg-gray-50;
}

/* Children of a collapsed parent */
.Revisions-listItem:has(.Revisions-listItem-collapseButton:not(.is-active))
  .Revisions-listItem-children {
  @apply mt-0 h-0 overflow-hidden pt-0 opacity-0;
}

/* Children of an expanded parent */
.Revisions-listItem:has(.Revisions-listItem-collapseButton.is-active)
  .Revisions-listItem-children {
  @apply h-auto opacity-100;
}

.Revisions-listItem-children {
  @apply relative mt-4 !grid h-0 pt-0 transition-[height,padding] duration-300 [grid-column:1/-1] [grid-template-columns:subgrid] before:absolute before:inset-0 before:-mx-4 before:-mb-4 before:bg-transparent before:[grid-column:1/-1];
}

.Revisions-listItem-children .Revisions-listItem {
  @apply z-0 grid border-none bg-inherit p-0 pb-4 [grid-column:2];
}

.Revisions-more {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs before:btu-icon before:btu-icon-ellipsis touch-device:btu-button-sm before:btu-icon-md;
}

.Revisions-more.is-active {
  @apply outline outline-primary-100 before:btu-icon-x;
}

.Revisions-actions > .Dropdown.is-open {
  @apply Dropdown-is-open;
}

.Revisions-links {
  @apply -mx-4 my-0;
}

.Revisions-links > .Revisions-listItem {
  @apply mt-0 border-none;
}

.Revisions-links > .Revisions-listItem > a {
  @apply text-sm font-semibold no-underline;
}

.Revisions-label {
  @apply text-sm font-medium;
}

.Revisions-toggle {
  @apply Checkbox-toggle me-2;
}

.Revisions-pagination {
  @apply order-last my-4 flex justify-end;
}

.Revisions-listItemInfo {
  @apply z-[1] flex flex-row justify-between text-sm;
}

.Revisions-listItemInfo:has(.Revisions-workflowTransition) {
  @apply grid justify-normal text-sm font-medium text-gray-700;
}

.Revisions-listItemLineOne {
  @apply text-sm font-medium text-gray-900;
}

.Revisions-listItemLineTwo {
  @apply text-sm font-medium text-gray-500;
}

.Revisions-listItemLineThree {
  @apply flex w-[calc(100%_+_theme(spacing.6))] flex-wrap gap-2;
  /*
    The extra width is to pseudo-expand the label into the far column
    in an attempt to avoid wrapping text.
  */
}

.Revisions-listItemLineThree,
.Revisions-listItemLineFour {
  @apply break-all;
}

.Revisions-userLabel {
  @apply flex items-center text-xs font-medium text-gray-500;
}

/*
  Try to pick colors with sufficient contrast relative to the user's color choice.
*/
.Revisions-statusLabel[data-status-color] {
  --foreground: oklch(
    from var(--status-color) clamp(0.3, calc(l / 1.2), 0.5) c h
  );
  --background: oklch(
    from var(--foreground) clamp(0.908, calc(l * 1.5), 0.98) c h
  );
}

.Revisions-statusLabel {
  @apply btu-badge-sm items-baseline break-keep bg-[--background] text-[--foreground] before:size-2 before:min-w-2 before:rounded-lg before:bg-[--foreground];
}

/* margin-top is used here to vertically center the text with the flanking icon controls */
.Revisions-info {
  @apply mt-1 flex basis-full flex-col flex-wrap gap-2 text-sm font-medium text-gray-900 no-underline;
}

.Revisions-workflowTransition {
  @apply order-1 text-xs font-medium text-gray-500;
}

.Revisions-workflowTransition .Revisions-userLabel {
  @apply text-xs font-medium text-gray-500;
}

.Revisions-workflowTransition .Revisions-userLabel > span {
  @apply me-0.5 min-w-max;
}

.Revisions-workflowComment {
  @apply order-2 grow basis-full rounded-lg bg-gray-50 p-2 text-sm text-gray-500;
}

.Revisions-workflowState {
  @apply order-3 flex flex-row items-center gap-2;
}

.Revisions-workflowStateIcon {
  @apply grid cursor-auto place-items-center before:btu-icon before:btu-icon-arrow-right before:font-semibold before:text-gray-500 before:btu-icon-xs;
}

/* Adjustments to Guide styles within a Popup (ie, Sites history) */
.Popup[name='request'] > .Popup-content > .frame {
  &:not(.has-ActionBarContent) {
    @apply mb-6 auto-rows-max;
  }

  /*
    jquery.frame.js strips .Widget on endLoad ($frame.removeClass('Widget')).
    The AJAX payload is the widget's inner HTML with no outer .Widget wrapper,
    so grid-cols-subgrid on .Revisions-list loses its named-line parent.
    Re-establish the Widget grid here. If Widget's grid-template-columns or
    --space default changes, update this block to match (see .Widget rule in Widget.css).
  */
  &:not(.Widget) {
    /*
      Re-declare --space to match .Widget's default (.Widget --space default in Widget.css).
      Cannot inherit because .Widget is absent from the DOM at this point.
    */
    --space: theme(spacing.6); /* keep in sync with Widget.css */
    @apply relative grid [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];

    > *:not(.ContentEdit-preview) {
      @apply [grid-column:content-start/content-end];
    }
  }
  .Widget-filters {
    @apply border-0;
  }
  .Revisions-listItem {
    @apply px-[--space];
  }
}
