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

    .control:nth-of-type(n + 6) {
      flex-basis: 49%;
      align-self: flex-end;
    }

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

  .main {
    flex: 100%;
    display: flex;
    order: 2;
    gap: 1rem;
    align-items: flex-start;
    max-height: 100vh;
  }
}

.admin-report-sentiment-analysis {
  @include report-container-box();
  flex: 2;
  display: flex;
  flex-flow: row wrap;
  gap: 3rem;

  .admin-report-doughnut {
    max-width: 300px;
    max-height: 300px;
    padding: 0.25rem;
  }

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

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

: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;
  display: flex;
  flex-flow: column nowrap;
  overflow-y: auto;
  height: 100%;

  &__title {
    font-size: var(--font-up-2);
  }

  &__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 {
    .avatar-wrapper,
    .avatar-link {
      width: calc(48px * 0.75);
      height: calc(48px * 0.75);
    }

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