$moderateCardFlagUsernameColor: var(--v2-colors-mono-900);
$moderateCardReasonTextColor: var(--v2-colors-mono-500);

.user {
  color: $moderateCardFlagUsernameColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-secondary-bold);
  font-family: var(--v2-font-family-secondary);
  line-height: var(--v2-line-height-title);
  padding-right: calc(0.5 * var(--mini-unit));
}

.details {
  color: $moderateCardReasonTextColor;
  font-size: var(--v2-font-size-2);
  font-weight: var(--v2-font-weight-primary-regular);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-title);
}

.flagger {
  line-height: var(--v2-line-height-reset);
  margin-right: var(--mini-unit);
  padding: var(--v2-spacing-1);
  margin-left: calc(-1 * var(--v2-spacing-1));

  &:hover {
    background-color: var(--v2-palette-grey-lightest);
    border-radius: var(--v2-round-corners);
    border-style: none;
  }

  &:active {
    background-color: var(--v2-palette-grey-lighter);
    border-radius: var(--v2-round-corners);
    border-style: none;
  }
}
