@use "lib/viewport";

.topic-map {
  // Hide the Top Replies label if summarization is enabled
  &:has(.topic-map__additional-contents .ai-summarization-button) {
    .top-replies {
      .d-icon {
        margin: 0;
        height: 1.2em;
      }

      .d-button-label {
        display: none;
      }
    }
  }

  // Hide the Summarize label when there are many stats
  &:has(.--many-stats):has(.top-replies) .topic-map__additional-contents {
    button {
      .d-icon {
        margin: 0;
        height: 1.2em;
      }

      .d-button-label {
        display: none;
      }
    }
  }
}

.ai-summary-modal {
  .ai-summary {
    &__generating-text {
      display: inline-block;
      margin-left: 3px;
    }
  }

  .placeholder-summary {
    padding-top: 0.5em;
  }

  .placeholder-summary-text {
    display: inline-block;
    height: 1em;
    margin-top: 0.6em;
    width: 100%;
  }

  .generated-summary p {
    margin: 0;
  }

  .outdated-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    button {
      margin-top: 0.5em;
    }

    p {
      color: var(--primary-medium);
    }
  }

  .d-modal__footer {
    display: grid;
    gap: 0;
    grid-template-areas: "summarized regenerate" " outdated regenerate";
    grid-template-columns: 1fr auto;

    @include viewport.until(sm) {
      gap: 0.25em 0.5em;
      grid-template-areas: "summarized summarized" "regenerate outdated";
    }

    p {
      margin: 0;
    }

    .fk-d-tooltip__trigger {
      vertical-align: text-top;
    }

    .summary-outdated {
      color: var(--primary-high);
      font-size: var(--font-down-1);
      line-height: var(--line-height-medium);
    }

    .summarized-on {
      grid-area: summarized;
    }

    button {
      grid-area: regenerate;
      justify-self: start;
    }
  }
}
