.ContentSummary-popup {
  .Popup-close {
    left: calc(
      var(--Tether-rl) + var(--Tether-rw) - var(--gap-l) - var(--Icon-size)
    );
  }

  &.is-preview {
    .ContentSummary {
      display: grid;
      grid-template:
        'header' auto
        'content' auto
        'preview' 40vh
        / 100%;
    }
  }

  .ContentSummary-edit,
  .ContentSummary-share {
    font-weight: 400;
    margin-right: var(--gap-l);
  }
}

.ContentSummary {
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: auto;

  &-row {
    margin-bottom: var(--gap-m);

    &:last-child {
      margin: 0;
    }
  }

  &-subtitle {
    .Text.is-s;

    color: var(--color-gray7);
    font-weight: bold;
    margin-bottom: var(--gap-s);
    position: relative;

    span {
      color: var(--color-gray5);
      margin-left: var(--gap-s);

      &::before {
        content: '(';
      }

      &::after {
        content: ')';
      }
    }
  }

  &-description {
    .Text.is-s;

    margin-bottom: var(--gap-l);
    overflow-x: scroll;
    position: relative;
  }

  &-richText {
    .Diff-field;

    display: inline-block;
    word-break: break-word;

    a {
      color: var(--Link-color);
    }

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

    ol,
    ul {
      margin-left: 0;
    }

    .cms-textAlign-right {
      text-align: right;
    }

    .cms-textAlign-center {
      text-align: center;
    }

    .cms-textAlign-left {
      text-align: left;
    }
  }

  & > .Widget-title {
    display: flex;
    flex-wrap: wrap;
    grid-area: header;

    & > span {
      margin-right: var(--gap-xl);
    }
  }
}

.ContentSummary.is-open {
  .Dropdown.is-open;

  padding: 0;

  &.error-summary {
    min-width: fit-content;
  }
}

.ContentSummary-content {
  grid-area: content;
  max-height: 70vh;
  overflow: scroll;
  padding: var(--gap-l);
}

.ContentSummary-title {
  margin-bottom: var(--gap-l);

  a {
    color: var(--Link-color);
    text-decoration: var(--Link-hoverDecoration, underline);
  }
}

.ContentSummary-titleInfo {
  color: var(--color-gray5);

  span {
    .Text.is-s;

    &:first-child {
      margin-right: var(--gap-s);
    }
  }
}

.ContentSummary-info {
  .IconButton;

  --IconButton-name: 'info';

  margin: calc(0px - var(--gap-m) + var(--gap-xs)) 0 calc(0px - var(--gap-s)) 0;
  opacity: 0;
}

.ContentSummary-link {
  position: relative;
}

.ContentSummary-info:focus {
  opacity: 1;
}

.RCS-item,
.RCIG-item,
.Sortable-item,
.LinkTable-main:focus-within,
.LinkTable-main:hover,
.LinkList-main:focus-within,
.LinkList-main:hover,
.ContentSummary-content:hover,
.ContentSummary-link:hover {
  .ContentSummary-info {
    opacity: 1;
  }
}

a.is-active + .ContentSummary-info {
  opacity: 1;
}

.ContentSummary-preview {
  border-top: 1px solid var(--color-gray2);
  grid-area: preview;

  iframe {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 11;
  }

  .PreviewFrame-typeControlsContainer {
    display: none;
  }
}

@media (@mq-s) {
  .ContentSummary-popup {
    &.is-preview {
      .ContentSummary {
        grid-template:
          'header header' auto
          'content preview' 70vh
          / 50% 50%;
      }
    }
  }

  .ContentSummary {
    overflow: hidden;
  }

  .ContentSummary-preview {
    border-left: 1px solid var(--color-gray2);
    border-top: none;

    &::before {
      .Icon;

      animation: spin var(--time-xl) infinite ease-in-out;
      color: var(--color-black);
      content: 'autorenew';
      height: var(--Icon-size-l);
      left: 72%;
      margin-right: var(--gap-m);
      position: absolute;
      top: 50%;
      width: var(--Icon-size-l);
      z-index: 10;
    }
  }
}
