.Diff {
  @apply bg-gray-50;
}

.Diff .TabBar {
  @apply flex-shrink-0 pt-3;
}

.Diff-row {
  @apply flex gap-6;
}

/* Styles for first Diff-row */
.Diff .TabBar + .Diff-row,
.Diff-diff .Diff-row:first-child {
  @apply pt-6;
}

/* Styles for last visible Diff-row */
.Diff-row:not(.TC-unselected):not(:has(~ .Diff-row:not(.TC-unselected))) {
  @apply pb-6;

  .Diff-current,
  .Diff-comparison {
    @apply rounded-b-lg border-b border-gray-200;
  }
}

/* Styles for the heading when there are no differences */
.Diff-row:has(+ .Message) > .Diff-heading {
  @apply rounded-b-lg;
}

/* Styles for the no differences message */
.Diff-row + .Message {
  @apply !mx-6 !my-0 w-auto bg-white;
}

.Diff-heading,
.Diff-current,
.Diff-comparison {
  @apply w-1/2 min-w-[400px] overflow-clip bg-white;
}

/* Hide full-width "Back" bar in favor of the close popup "X" icon */
.Diff-title {
  @apply hidden;
}

.Diff-container {
  @apply max-h-[calc(100cqh_-_var(--page-header-h,_68px)_+_3px)] overflow-auto;
}

.Diff-diff {
  @apply !flex w-fit flex-col !flex-nowrap md:w-full;
}

.Diff-diff > *:not(.TabBar) {
  @apply px-6;
}

.Diff-heading {
  @apply rounded-t-lg border border-gray-200;
}

.Diff-heading .Message {
  @apply !m-0 flex flex-wrap items-start rounded-b-none !border-0 !bg-white px-6 py-3;
}

.Diff-heading .Message-icon {
  @apply hidden;
}

.Diff-heading .Message .Diff-message > .Diff-revisionLabel {
  @apply btu-heading-5 text-gray-900;
}

/* Use a badge for the Diff status. Default to primary blue. */
.Diff-heading
  .Message
  .Diff-message
  > span:first-child:not(.Diff-revisionLabel) {
  @apply btu-badge-primary btu-badge-sm font-medium before:size-2 before:rounded-lg before:bg-[currentColor] before:content-[''];
}

.Diff-heading .Message.is-live .Diff-message > span:first-child {
  @apply btu-badge-success;
}

.Diff-heading .Message.is-workflow .Diff-message > span:first-child {
  @apply btu-badge-gray;
}

.Diff-heading .Message.is-draft .Diff-message > span:first-child {
  @apply btu-badge-warning;
}

.Diff-heading .Message.is-archived .Diff-message > span:first-child {
  @apply btu-badge-error;
}

.Diff-message {
  @apply flex flex-wrap;
}

.Diff-message .Diff-revisionDate:first-child {
  @apply order-2;
}

.Diff-message .Diff-revisionDate:not(:first-child) {
  @apply btu-heading-5 order-1 mb-1 w-full text-gray-900;
}

.Diff-message .Diff-revisionUser {
  @apply order-3 ms-2 font-medium text-gray-500;
}

.Diff-current,
.Diff-comparison {
  @apply border-x border-gray-200 px-6 py-4;

  img {
    @apply w-full;
  }
}

.Diff-field {
  @apply text-gray-900;

  ins,
  ins * {
    @apply bg-success-200;
  }

  del,
  del * {
    @apply bg-error-200;
  }

  .Diff-insert,
  ins .Diff-enhancement,
  ins {
    @apply rounded no-underline;
  }

  .Diff-delete,
  del .Diff-enhancement,
  del {
    @apply rounded text-error-900 line-through;
  }

  del .Diff-enhancement {
    @apply no-underline;
  }

  dt::after {
    @apply content-[':'];
  }

  dd {
    @apply mb-2 ms-2 inline-block;
  }

  a,
  b,
  i,
  em,
  code,
  u,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  s,
  ul,
  ol {
    @apply [all:revert];
  }

  a {
    @apply rounded-[0.25rem];
  }

  ul,
  ol {
    @apply !ms-6 list-inside !overflow-clip rounded-[0.25rem] bg-inherit !pe-2;
  }

  table {
    @apply min-w-full bg-inherit;

    tbody > tr {
      @apply hover:bg-inherit;
    }

    .Diff-enhancement {
      @apply border border-gray-200;
    }
  }

  td {
    @apply border border-gray-200 p-2;
  }

  [data-diff-state] {
    @apply relative cursor-pointer after:btu-icon after:btu-icon-info after:absolute after:right-4 after:top-4;
  }
}

.Diff-enhancement {
  @apply my-4 inline-block rounded-[0.25rem] bg-gray-50 p-4;
}

/* Note that using "@apply block" here would create a circular dependency error in tailwind. Using the css brackets instead. */
.Diff-enhancement.block {
  @apply [display:block];
}

.Diff-enhancement img {
  @apply max-h-[300px] object-contain;
}

.Diff-enhancementLabel {
  @apply mb-3 me-3 inline-block text-sm font-medium;
}

.Diff-enhancement {
  &.rte2-style-brightspot-core-carousel-CarouselRichTextElement,
  &.rte2-style-brightspot-core-image-ImageRichTextElement,
  &.rte2-style-brightspot-core-module-ModuleRichTextElement,
  &.rte2-style-brightspot-core-video-VideoRichTextElement,
  &.rte2-style-brightspot-core-playlist-PlaylistRichTextElement,
  &.rte2-style-brightspot-media-podcast-PodcastRichTextElement,
  &.rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement,
  &.rte2-style-brightspot-core-quote-QuoteRichTextElement {
    @apply before:btu-icon before:me-2;
  }

  &.rte2-style-brightspot-core-carousel-CarouselRichTextElement {
    @apply before:btu-icon-images;
  }

  &.rte2-style-brightspot-core-image-ImageRichTextElement {
    @apply before:btu-icon-image;
  }

  &.rte2-style-brightspot-core-module-ModuleRichTextElement {
    @apply before:btu-icon-blocks;
  }

  &.rte2-style-brightspot-core-video-VideoRichTextElement {
    @apply before:btu-icon-video;
  }

  &.rte2-style-brightspot-core-playlist-PlaylistRichTextElement {
    @apply before:btu-icon-list-video;
  }

  &.rte2-style-brightspot-media-podcast-PodcastRichTextElement {
    @apply before:btu-icon-radio;
  }

  &.rte2-style-brightspot-core-quote-QuoteRichTextElement {
    @apply before:btu-icon-quote;
  }

  &.rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement {
    @apply before:btu-icon-chevrons-left-right-ellipsis;
  }
}

.Diff-embed {
  @apply ms-3 border-s border-gray-300 ps-3;
}

.Diff-row .CIG-label {
  @apply mb-2 text-xs font-medium text-gray-500;
}
