discourse/plugins/discourse-ai/assets/stylesheets/modules/sentiment/common/dashboard.scss

@use "lib/viewport";

.dashboard.dashboard-sentiment {
  .charts {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1em;
    row-gap: 1em;

    .admin-report {
      grid-column: span 12;
    }
  }
}

.admin-report.sentiment-analysis {
  --d-sentiment-report-positive-rgb: 46, 204, 112;
  --d-sentiment-report-neutral-rgb: 149, 166, 167;
  --d-sentiment-report-negative-rgb: 231, 77, 60;

  .chart {
    &__wrapper {
      display: flex;
      gap: 1rem;
    }

    &__body {
      display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      position: relative;
    }

    &__filters {
      // Hides tag selector when showing subcategories selector
      .chart__filter.--include_subcategories ~ .chart__filter.--tag {
        display: none;
      }
    }
  }

  .control:has(.export-csv-btn) {
    display: none;
  }

  .doughnut-chart-title {
    @include ellipsis;
    margin: 0 auto;
    margin-top: 1rem;
    text-align: center;
    font-size: var(--font-up-2);
  }

  .admin-report-doughnut {
    .chart-canvas-container {
      width: 300px;
      height: 300px;
    }
  }
}

.admin-report-sentiment-analysis {
  &__selected-chart {
    border: 1px solid var(--primary-low);
    border-radius: var(--d-border-radius);
    padding: 1rem;
  }

  &__selected-chart-actions {
    display: flex;
    align-items: center;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--primary-low);

    .share {
      margin-left: auto;

      .d-icon-check {
        color: var(--success);
      }
    }
  }
}

.admin-report-sentiment-analysis-details {
  border: 1px solid var(--primary-low);
  border-radius: var(--d-border-radius);
  padding: 1rem;
  flex: 1 1 300px;
  min-width: 300px;
  margin-left: 1rem;
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
  height: 100%;
  padding-top: 0;

  &__filters {
    border-bottom: 1px solid var(--primary-low);
    margin-bottom: 1rem;

    @include viewport.until(sm) {
      .d-button-label {
        display: none;
      }
    }
  }

  &__scores {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    list-style: none;
    margin-left: 0;
    background: var(--primary-very-low);
    padding: 1rem;
    border-radius: var(--d-border-radius);

    .d-icon-face-smile {
      color: rgb(var(--d-sentiment-report-positive-rgb));
    }

    .d-icon-face-meh {
      color: rgb(var(--d-sentiment-report-neutral-rgb));
    }

    .d-icon-face-angry {
      color: rgb(var(--d-sentiment-report-negative-rgb));
    }
  }

  &__post-score {
    border-radius: var(--d-border-radius);
    background: var(--primary-very-low);
    margin-top: 0.5rem;
    padding: 0.25rem;
    font-size: var(--font-down-1);
    display: inline-block;

    &[data-sentiment-score="positive"] {
      color: rgb(var(--d-sentiment-report-positive-rgb));
      background: rgb(var(--d-sentiment-report-positive-rgb), 0.1);
    }

    &[data-sentiment-score="neutral"] {
      color: rgb(var(--d-sentiment-report-neutral-rgb));
      background: rgb(var(--d-sentiment-report-neutral-rgb), 0.1);
    }

    &[data-sentiment-score="negative"] {
      color: rgb(var(--d-sentiment-report-negative-rgb));
      background: rgb(var(--d-sentiment-report-negative-rgb), 0.1);
    }
  }

  &__post-list {
    margin-top: 1rem;

    .avatar-wrapper,
    .avatar-link {
      width: calc(48px * 0.75);
      height: calc(48px * 0.75);
    }

    img.avatar {
      width: 100%;
      height: 100%;
    }
  }

  nav.horizontal-overflow-nav {
    background: var(--secondary);
    position: sticky;
    top: 0;
    padding-top: 1rem;
    z-index: z("timeline");
  }
}

.showing-sentiment-analysis-chart
  .admin-report.sentiment-analysis
  .chart__filters {
  // Hide elements 2 - 6 when showing selected chart
  // as they're not supported being changed in this view
  .control:first-of-type {
    flex: unset;
  }

  .control:nth-of-type(n + 2):nth-of-type(-n + 6) {
    display: none;
  }
}

.sentiment-analysis-table {
  font-weight: bold;
  font-size: var(--font-up-1);
}

.sentiment-horizontal-bar {
  display: flex;

  &__count {
    font-weight: bold;
    font-size: var(--font-down-1);
    color: var(--secondary);
  }

  &__positive,
  &__neutral,
  &__negative {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem;
    border-left: 2px solid var(--secondary);
    border-right: 2px solid var(--secondary);
  }

  &__positive {
    background: rgb(var(--d-sentiment-report-positive-rgb));
    border-top-left-radius: var(--d-border-radius);
    border-bottom-left-radius: var(--d-border-radius);
  }

  &__negative {
    background: rgb(var(--d-sentiment-report-negative-rgb));
  }

  &__neutral {
    background: rgb(var(--d-sentiment-report-neutral-rgb));
    border-top-right-radius: var(--d-border-radius);
    border-bottom-right-radius: var(--d-border-radius);
  }
}