discourse/plugins/discourse-solved/assets/stylesheets/solutions.scss

@use "sass:math";
@use "lib/viewport";

@keyframes solved-confetti-burst {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(
        calc(-50% + cos(var(--angle)) * var(--distance)),
        calc(-50% + sin(var(--angle)) * var(--distance) + 50px)
      )
      rotate(var(--rotation));
    opacity: 0;
  }
}

.solved-confetti {
  position: fixed;
  top: 200px;
  right: 200px;
  width: 0;
  height: 0;
  z-index: z("header") + 1;
  overflow: visible;
  pointer-events: none;
}

.solved-confetti-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: solved-confetti-burst 1.5s ease-out forwards;

  @for $i from 1 through 50 {
    &:nth-child(#{$i}) {
      --angle: #{math.random(360)}deg;
      --distance: #{80 + math.random(150)}px;
      --rotation: #{math.random(720) - 360}deg;
      --delay: #{math.random(250) * 0.001}s;
      --color: #{hsl(math.random(360), 80%, 60%)};
      background-color: var(--color);
      animation-delay: var(--delay);
    }
  }
}

$solved-color: var(--success);

.select-kit {
  &.solved-status-filter {
    min-width: auto;
    margin-right: 0.5em;

    .select-kit-header {
      color: var(--primary-high);
    }

    .angle-icon {
      color: currentcolor;
    }
  }
}

.fa.accepted {
  color: $solved-color;
}

.post-controls .extra-buttons {
  // anon text
  .accepted-text {
    white-space: nowrap;

    .d-icon,
    .accepted-label {
      color: $solved-color;
    }
  }

  // logged in button
  .accepted {
    .d-icon,
    .d-button-label {
      color: $solved-color;
    }
  }
}

.post-controls span.accepted-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0 0.5rem;
  font-size: var(--font-up-1);
  height: 100%;
}

.user-card-metadata-outlet.accepted-answers {
  display: inline-block;
}

.post-action-menu__solved-accepted-tooltip-content
  .fk-d-tooltip__inner-content {
  display: block;
}

.topic-statuses .topic-status.--solved {
  .d-icon {
    color: $solved-color;
  }
}

.accepted-answers {
  &.d-post-accordion {
    --d-post-accordion-header-color: var(--secondary);
    --d-post-accordion-header-background: #{$solved-color};
    --d-post-accordion-header-border-color: #{$solved-color};
    padding-bottom: var(--space-4);

    @include viewport.from(sm) {
      padding: var(--space-1) var(--topic-body-width-padding) var(--space-4)
        var(--topic-body-width-padding);
    }
  }

  &__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    text-transform: uppercase;
    font-weight: normal;
  }

  &__solution-count {
    font-size: var(--font-down-1);
  }
}

.solved-shared-issue-row {
  @include viewport.from(sm) {
    padding-left: var(--topic-body-width-padding);
  }
}

.solved-shared-issue-row .post-action-menu__solved-shared-issue {
  &.has-shared-issue {
    --d-button-default-icon-color: var(--tertiary);
  }
}