.Widget[name='diff'] {
  margin: 0;
  padding: 0;
}

.Diff {
  --RevisionCompare-titleHeight: calc(var(--gap-m) * 2 + var(--Icon-size));

  position: relative;

  .TabBar {
    left: 0;
    margin: 0;
    padding: 0;
    position: sticky;
  }

  .CIG-row {
    border-right: 1px solid var(--color-gray3);
  }
}

.Diff-row {
  display: flex;
  flex-flow: row nowrap;

  .CIG-label {
    padding-bottom: var(--gap-l);
  }
}

.Diff-heading,
.Diff-current,
.Diff-comparison {
  min-width: 400px;
  overflow: hidden;
  width: 50%;
}

.Diff-title {
  .Link;
  .Popup-heading;

  position: sticky;
  text-align: start;
  top: 0;
  width: 100%;
  z-index: 1;

  &:hover {
    cursor: pointer;
  }
}

.Diff-container {
  max-height: 100vh;
  overflow: scroll;
  position: relative;
}

.Diff-diff {
  max-width: 100vw;
  overflow-y: scroll;
  padding: 0;

  .Message {
    margin-left: 0;
    width: 100%;
  }
}

.Diff-heading {
  min-width: 400px;
  overflow: hidden;
  width: 50%;
}

.Diff-heading {
  &:first-child {
    border-right: 1px solid var(--color-gray3);
  }

  &.Revision .Message.is-live {
    --Revision-revisionBackgroundColor: var(--color-green1);
  }

  &.Revision .Message .ContentEdit-revisionInfo {
    margin-bottom: 0;
  }

  .Message {
    border-bottom: solid 4px var(--Revision-revisionColor);
  }
}

.Diff-message {
  .Text.is-m;

  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Diff-revisionDate,
.Diff-revisionUser {
  &::before {
    content: '\22C5';
    margin: 0 var(--gap-xs);
  }
}

.Diff-current,
.Diff-comparison {
  padding: var(--gap-l) var(--gap-xl);

  img {
    height: auto;
    width: 100%;
  }
}

.Diff-current {
  border-right: 1px solid var(--color-gray3);
  padding-right: var(--gap-l);
}

.Diff-field {
  ins *,
  del * {
    background-color: inherit;
  }

  .Diff-insert,
  ins .Diff-enhancement,
  ins {
    background-color: var(--color-green3);
  }

  .Diff-delete,
  del .Diff-enhancement,
  del {
    background-color: var(--color-red3);
    color: var(--color-red6);
    text-decoration: line-through;
  }

  del .Diff-enhancement {
    text-decoration: none;
  }

  dt::after {
    content: ':';
  }

  dd {
    display: inline-block;
    margin-bottom: var(--gap-m);
    margin-left: var(--gap-m);
  }

  a,
  b,
  i,
  em,
  code,
  u,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  s {
    all: revert;
  }

  ul,
  ol {
    all: revert;
    background-color: inherit;
    list-style-position: inside;
    margin-left: var(--gap-xl);
  }

  table {
    background-color: inherit;
    min-width: 100%;

    .Diff-enhancement {
      border: solid 2px var(--color-gray3);
    }
  }

  td {
    border: solid 1px var(--color-gray3);
    padding: var(--gap-s);
  }

  [data-diff-state] {
    cursor: pointer;
    position: relative;

    &::after {
      .Icon;

      bottom: auto;
      color: var(--color-black);
      content: 'info';
      display: block;
      opacity: 1;
      position: absolute;
      right: var(--gap-s);
      top: var(--gap-s);
    }
  }

  .Diff-enhancement {
    background-color: var(--color-gray1);
    display: inline-block;
    margin: var(--gap-m) 0;
    padding: var(--gap-s);
  }

  .Diff-enhancement.block {
    display: block;
  }

  .Diff-enhancement img {
    max-height: 300px;
    object-fit: contain;
  }

  .Diff-enhancementLabel {
    display: inline-block;
    font-size: small;
    font-style: italic;
    margin-bottom: var(--gap-s);
    margin-right: var(--gap-s);
  }

  .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 {
      &::before {
        .Icon;

        margin-right: var(--gap-xs);
      }
    }

    &.rte2-style-brightspot-core-carousel-CarouselRichTextElement::before {
      content: 'photo_library';
    }

    &.rte2-style-brightspot-core-image-ImageRichTextElement::before {
      content: 'photo';
    }

    &.rte2-style-brightspot-core-module-ModuleRichTextElement::before {
      content: 'view_module';
    }

    &.rte2-style-brightspot-core-video-VideoRichTextElement::before {
      content: 'ondemand_video';
    }

    &.rte2-style-brightspot-core-playlist-PlaylistRichTextElement::before {
      content: 'playlist_play';
    }

    &.rte2-style-brightspot-media-podcast-PodcastRichTextElement::before {
      content: 'music_note';
    }

    &.rte2-style-brightspot-core-quote-QuoteRichTextElement::before {
      content: 'format_quote';
    }

    &.rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement::before {
      content: 'settings_ethernet';
    }
  }
}

.Diff-embed {
  background: var(--color-yellow1);
  padding-left: var(--gap-m);

  .CIG-row {
    background: var(--color-white);
    border-right: none;
    padding-left: var(--gap-s);
  }
}

@media (@mq-m) {
  .Diff-container {
    display: flex;
    justify-content: space-between;
    max-height: unset;
    overflow: auto;
  }

  .Diff-diff {
    height: calc(
      100vh -
        calc(var(--RevisionCompare-titleHeight) + var(--Page-headerHeight))
    );
    overflow-y: scroll;
  }

  .Diff-diff {
    align-content: flex-start;
    width: 100%;
  }
}
