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

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

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

@mixin report-container-box() {
  border: 1px solid var(--primary-low);
  border-radius: var(--d-border-radius);
  padding: 1rem;
}

.admin-report.sentiment-analysis .body {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;

  .filters {
    @include report-container-box;
    order: 1;
    width: 100%;
    margin-left: 0;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;

    .control {
      min-width: 200px;
    }

    .control:nth-of-type(-n + 4) {
      flex: 1;
    }

    // Hides tag selector when showing subcategories selector
    .control:nth-of-type(6):nth-last-of-type(3) {
      display: none;
    }

    .control:last-child {
      align-self: flex-end;
    }

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

  .main {
    flex: 100%;
    display: flex;
    flex-flow: row wrap;
    order: 2;
    align-items: flex-start;
    max-height: 100vh;
  }
}

.admin-report-sentiment-analysis {
  @include report-container-box;
  flex: 2;
  display: flex;
  gap: 2rem 1rem;
  justify-content: space-evenly;
  align-items: center;
  flex-flow: row wrap;
  padding-inline: 0;
  padding-block: 1.5rem;

  .admin-report-doughnut {
    padding: 0.25rem;
  }

  &__chart-wrapper {
    height: fit-content;
    position: relative;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
    border-radius: var(--d-border-radius);

    .doughnut-chart-title {
      @include ellipsis;
      margin: 0 auto;
      margin-top: 1rem;
      text-align: center;
    }

    &:hover {
      box-shadow: var(--shadow-card);
      transform: translateY(-0.5rem);
      cursor: pointer;
    }
  }

  &__selected-chart {
    border: 1px solid var(--primary-low);
    border-radius: var(--d-border-radius);
    padding: 1rem;

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

  &__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);
      }
    }
  }
}

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

.admin-report-sentiment-analysis-details {
  @include report-container-box;
  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 breakpoint("mobile-extra-large") {
      .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: rgba(var(--d-sentiment-report-positive-rgb), 0.1);
    }

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

    &[data-sentiment-score="negative"] {
      color: rgb(var(--d-sentiment-report-negative-rgb));
      background: rgba(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%;
    }
  }
}

.admin-reports.admin-contents .sentiment-analysis {
  .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
  .body
  .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 {
  margin: 1rem;

  &__total-score {
    font-weight: bold;
    font-size: var(--font-up-1);
  }

  &__row {
    cursor: pointer;
  }
}

.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);
  }
}